jquery 分頁(yè)控件實(shí)現(xiàn)代碼
更新時(shí)間：2009年11月30日 22:13:25 作者：
花了幾個(gè)小時(shí)用jqury寫(xiě)的分頁(yè)效果實(shí)現(xiàn)，功能基本實(shí)現(xiàn)需要再封裝下 呵呵～～
復(fù)制代碼 代碼如下:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >
<head>
<title>jquery分頁(yè)控件</title>
<script src="jquery-1.3.min.js" type="text/javascript"></script>
</head>
<body>
<div class="pager"></div>
<!--<div>
<select class="SEID">
<option>10</option>
<option selected="selected" >20</option>
<option>30</option>
</select>
<div class="first">首頁(yè)</div>
<div class="pre">上一頁(yè)</div>
<div class="centerclass"></div>
<div class="next">下一頁(yè)</div>
<div class="last">最后一頁(yè)</div>
<input type="text" value="1" /> of<span class="totelspan">0</span>
</div>-->
</body>
</html>
<script type="text/javascript">
var pageindex=1;
var totelsize=60;
var centersize=5;
var pagesize=0;
var totelSec=0;
var outStr="";
var se="<select class=\"SEID\">"
+"<option>5</option>"
+"<option selected=\"selected\" >10</option>"
+"<option>15</option>"
+"</select>";
var firstdiv="<div class=\"first\">首頁(yè)</div>";
var prediv="<div class=\"pre\">上一頁(yè)</div>";
var centerdiv="<div class=\"centerclass\"></div>";
var nextdiv="<div class=\"next\">下一頁(yè)</div>";
var lastdiv="<div class=\"last\">最后一頁(yè)</div>";
$('.pager').empty();
$('.pager').append(se)
$('.pager').append(firstdiv)
$('.pager').append(prediv)
$('.pager').append(centerdiv)
$('.pager').append(nextdiv)
$('.pager').append(lastdiv)
function PageInit()
{
var size=0;
var barObj=this;
var PageReinit=function()
{
pagesize=$(".SEID option:selected")[0].innerText;
size=parseInt(totelsize/pagesize)
var lastSize=totelsize%pagesize;//最后一頁(yè)顯示記錄
if(lastSize>0)
{
size=size+1;
}
totelSec=parseInt(size/centersize);
var leftSize=size%centersize;//最后一個(gè)區(qū)段的顯示記錄
if(leftSize>0)
{
totelSec =totelSec+1;
}
PageBarinit();
}
var reSetPage=function()
{
pageindex=1;
pagesize=0;
totelSec=0;
outStr="";
}
// alert('總頁(yè)數(shù):'+size)
// alert('總區(qū)段:'+totelSec)
// alert('每頁(yè)記錄數(shù)：'+pagesize);
var SeClick=function(e)
{
var Selectindex=e.target[e.target.selectedIndex].innerText;
pagesize=parseInt(Selectindex);
alert('每頁(yè)顯示：'+Selectindex);
reSetPage();
PageReinit();
}
var firstClick=function(e)
{
alert('點(diǎn)擊到首頁(yè)');
if(pageindex!=1)
{
pageindex=1;
alert('到了第1頁(yè)');
}
}
var preClick=function(e)
{
alert('點(diǎn)擊到上一頁(yè)');
if(pageindex!=1)
{
pageindex =pageindex-1;
alert('到了第'+pageindex+'頁(yè)');
}
ChangeCenterBar(pageindex+1);
}
var pageClick=function(e)
{
var targePage=parseInt(e.target.innerText);
pageindex=targePage;
alert('點(diǎn)擊了第'+targePage+"頁(yè)");
ChangeCenterBar(targePage);
}
var nextClick=function(e)
{
alert('點(diǎn)擊了下一頁(yè)');
if(pageindex<size)
{
pageindex =pageindex+1;
if(pageindex==size)
{
alert('到了最后一頁(yè)');
}
else{
alert('到了第'+pageindex+'頁(yè)');
}
}
ChangeCenterBar(pageindex-1);
}
var lastClick=function(e)
{
alert('點(diǎn)擊了最后一頁(yè)');
if(pageindex<size)
{
pageindex=size;
alert('到了第'+size+'頁(yè)');
}
}
var ChangeCenterBar=function(CurrentIndex)
{
var currentSec=parseInt(CurrentIndex/centersize);
if( CurrentIndex%centersize==1)
{
if(currentSec<totelSec)
{ PageBarinit();}
}
if(CurrentIndex%centersize==0)
{
var currentSec=parseInt(CurrentIndex/centersize);
if(currentSec<totelSec)
{ PageBarinit();}
}
}
var PageBarinit=function()
{
$('.SEID').unbind('change',SeClick);
$('.first').unbind('click',firstClick);
$('.pre').unbind('click',preClick);
$('.next').unbind('click',nextClick);
$('.last').unbind('click',lastClick);
$('.SEID').bind('change',SeClick);
$('.first').bind('click',firstClick);
$('.pre').bind('click',preClick);
$('.next').bind('click',nextClick);
$('.last').bind('click',lastClick);
if(size<=centersize)
{
$('.centerclass').empty();
for(var i=1;i<=size;i++)
{
var cdiv="<span id='Page_"+String(i)+"'>"+i+"</span>";
$('.centerclass').append(cdiv);
$("#Page_"+i).bind('click',pageClick);
}
}else if(size>centersize)
{
$('.centerclass').empty();
if( pageindex%centersize==0)
{
var currentSec=parseInt(pageindex/centersize);//當(dāng)前區(qū)段
if(currentSec<totelSec)
{
// alert(9)
var startIndex=(currentSec-1)*centersize+1;
for(startIndex;startIndex<=currentSec*centersize;startIndex++)
{
//alert(startIndex)
//alert('最大'+currentSec*centersize);
var cdiv="<span id='Page_"+String(startIndex)+"'>"+startIndex+"</span>";
$('.centerclass').append(cdiv);
$("#Page_"+startIndex).bind('click',pageClick);
}
}
else if(currentSec==totelSec)
{
var startIndex=(currentSec-1)*centersize+1;
for(startIndex;startIndex<=currentSec*centersize;startIndex++)
{
var cdiv="<span id='Page_"+String(startIndex)+"'>"+startIndex+"</span>";
$('.centerclass').append(cdiv);
$("#Page_"+startIndex).bind('click',pageClick);
}
}else{
alert('分頁(yè)出錯(cuò)');
}
}else if(pageindex%centersize>0)
{
var currentSec=parseInt(pageindex/centersize)+1;//當(dāng)前區(qū)段
if(currentSec<totelSec)
{
var startIndex=(currentSec-1)*centersize+1;
for(startIndex;startIndex<=((currentSec-1)*centersize+centersize);startIndex++)
{
var cdiv="<span id='Page_"+String(startIndex)+"'>"+startIndex+"</span>";
$('.centerclass').append(cdiv);
$("#Page_"+startIndex).bind('click',pageClick);
}
}
else if(currentSec==totelSec){
var startIndex=(currentSec-1)*centersize+1;
for(startIndex;startIndex<=((currentSec-1)*centersize +size%centersize);startIndex++)
{
var cdiv="<span id='Page_"+String(startIndex)+"'>"+startIndex+"</span>";
$('.centerclass').append(cdiv);
$("#Page_"+startIndex).bind('click',pageClick);
}
}else
{
alert('分頁(yè)出錯(cuò)');
}
}
}
}
PageReinit();
}
PageInit();
</script>
相關(guān)文章
$.format,jquery.format 使用說(shuō)明
$.format,jquery.format 使用說(shuō)明，需要的朋友可以參考下。2011-07-07
jQuery實(shí)現(xiàn)美觀的多級(jí)動(dòng)畫(huà)效果菜單代碼
這篇文章主要介紹了jQuery實(shí)現(xiàn)多級(jí)動(dòng)畫(huà)效果菜單代碼,涉及jquery針對(duì)頁(yè)面元素的遍歷及事件綁定操作頁(yè)面元素樣式變換的技巧,界面美觀實(shí)用,具有一定參考借鑒價(jià)值,需要的朋友可以參考下2015-09-09
jQuery實(shí)現(xiàn)簡(jiǎn)單的按鈕顏色變化
這篇文章主要為大家詳細(xì)介紹了jQuery實(shí)現(xiàn)簡(jiǎn)單的按鈕顏色變化，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2021-08-08
最近在做一個(gè)項(xiàng)目，需要一個(gè)在線視頻播放的功能，在度娘上找了許多都不是太理想，就動(dòng)手寫(xiě)了一個(gè)，分享給大家2014-10-10
jquery中each循環(huán)的簡(jiǎn)單回滾操作
本篇文章主要介紹了jquery中each循環(huán)的簡(jiǎn)單回滾操作的相關(guān)知識(shí)，具有很好的參考價(jià)值。下面跟著小編一起來(lái)看下吧2017-05-05
jquery實(shí)現(xiàn)兩邊飄浮可關(guān)閉的對(duì)聯(lián)廣告
可關(guān)閉的左右兩邊漂浮的對(duì)聯(lián)廣告代碼jquery特效，寬屏分辨率大于1024px才顯示，當(dāng)用戶點(diǎn)擊關(guān)閉按鈕可以單獨(dú)關(guān)閉自己一邊的漂浮的對(duì)聯(lián)廣告代碼，juqery對(duì)聯(lián)廣告效果感興趣的朋友一起學(xué)習(xí)吧2015-11-11
基于jquery的一個(gè)浮動(dòng)框(擴(kuò)展性比較好 )
在用Maxthon的時(shí)候無(wú)意看到一個(gè)浮動(dòng)框，把它改成基于jquery的，擴(kuò)展性比較好，發(fā)來(lái)分享下。2010-08-08
jquery.tagsinput.js實(shí)現(xiàn)記錄checkbox勾選的順序
這篇文章主要為大家詳細(xì)介紹了jquery.tagsinput.js實(shí)現(xiàn)記錄checkbox勾選的順序，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2019-09-09
基于jquery的3d效果實(shí)現(xiàn)代碼，需要的朋友可以參考下。2011-03-03
JQuery跨Iframe選擇實(shí)現(xiàn)代碼
JQuery跨Iframe選擇實(shí)現(xiàn),下面也通過(guò)用DOM方法與jquery方法結(jié)合的方式實(shí)現(xiàn)了，需要的朋友可以參考下。2010-08-08