jquery動態分頁效果堪比時光網，jquery堪比

jquery動態分頁效果堪比時光網，jquery堪比

最近一直研究jquery的分頁效果，剛剛弄好了一個，拿出來與大家分享。分頁效果與時光網的差不多。

先在aspx頁面放置一個<div class="pageDivs"></div> ，這個是用來存放分頁的。

然後建一個page.js檔案，具體代碼如下(js中用到的css類是自己設定的，這裡就不給出了，具體的大家可以自己設定一下css樣式)：
複製代碼 代碼如下:
$(document).ready(function(){
var pageCount=0;//總頁數，在資料處理的函數裡設定

//////////////////////右部按鈕分頁顯示
function right(pageCount,limit,rlimit){
var html="";
if(parseInt(pageCount)-limit>=rlimit){
for(var i=parseInt(pageCount)-rlimit+1; i<=parseInt(pageCount); i++){
html+="<a page="+i+" leaf='leaf'>"+i+"</a>";}
}
else{
for(var i=parseInt(limit)+1; i<=pageCount; i++){
html+="<a page="+i+" leaf='leaf'>"+i+"</a>";}
}
return html;
}
//////////////////////////首頁，尾頁，上一頁，下一頁
function changeState(pageIndex,pageCount){
var $button1=$("div.pageDivs").find("#Button1");//上一頁
var $button2=$("div.pageDivs").find("#Button2");//下一頁
var $first=$("div.pageDivs").find("#First");//首頁
var $last=$("div.pageDivs").find("#Last");//尾頁
if(parseInt(pageIndex)==1){
$first.css("display","none");
$button1.css("display","none");}
else{
$first.css("display","inline");
$button1.css("display","inline");
$first.attr("page",1);
$button1.attr("page",parseInt(pageIndex)-1);}
if(parseInt(pageIndex)==pageCount){
$button2.css("display","none");
$last.css("display","none");}
else{
$last.css("display","inline");
$button2.css("display","inline");
$last.attr("page",pageCount);
$button2.attr("page",parseInt(pageIndex)+1);}

}
////////////////////////////////span動態分頁 左邊顯示的頁碼個數，右邊顯示的頁碼個數,要求limit>rlimit
function span(pageCount,pageIndex,limit,rlimit){
var isContinue=true;//指示是否繼續執行函數
var html="<a id='First' href='#' >|<</a><a id='Button1' href='#' ><</a>";
var change=(parseInt(pageCount)-parseInt(rlimit))/(parseInt(limit)-2);//指示分頁碼可以變動的次數
if(pageCount!=0&&pageCount!=1){
if(pageCount<=limit){
for(var i=1; i<=pageCount; i++){
html+="<a page="+i+" leaf='leaf'>"+i+"</a>"}
}
else{
if(parseInt(pageIndex)<(limit-2)){
for(var i=1; i<=limit; i++){
html+="<a page="+i+" leaf='leaf'>"+i+"</a>";}
html+="...";
html+=right(pageCount,limit,rlimit);
}
else{
if(parseInt(pageIndex)%(limit-2)==0){
if(parseInt(pageIndex)/(limit-2)<=change&&parseInt(pageIndex)-1+parseInt(limit)-1<=parseInt(pageCount)-parseInt(rlimit)){
for(var i=parseInt(pageIndex)-1; i<parseInt(pageIndex)-1+limit; i++){
html+="<a page="+i+" leaf='leaf'>"+i+"</a>";}
html+="...";
html+=right(pageCount,limit,rlimit);
}
else{
for(var i=1; i<=rlimit; i++){
html+="<a page="+i+" leaf='leaf'>"+i+"</a>";}
html+="...";
var rest=parseInt(pageCount)-parseInt(rlimit);
if(rest<limit){
for(var i=parseInt(rlimit)+1; i<=parseInt(pageCount); i++){
html+="<a page="+i+" leaf='leaf'>"+i+"</a>";}
}
else{
var start=parseInt(pageCount)-parseInt(limit)+1;
for(var i=start; i<=pageCount; i++){
html+="<a page="+i+" leaf='leaf'>"+i+"</a>";}
}
}

}
else{
html=$("div.pageDivs").html();
$("div.pageDivs").html(html);
isContinue=false;
}
}

}
}
if(isContinue){
html+="<a id='Button2' href='#' >></a><a id='Last' href='#' >>|</a>";
$("div.pageDivs").html(html);}
changeState(pageIndex,pageCount);
$("div.pageDivs").find("a[page=" + parseInt(pageIndex) + "]:visible").removeAttr("href").removeClass("disabled").addClass("current").siblings("a[page:visible").removeClass("current").addClass("disabled").attr("href", "#");
}

function page(pageIndex){

/////////////這裡放你具體的資料顯示，使用ajax動態載入處理資料

pageCount="通過資料處理獲得的頁面總數";

span(pageCount,pageIndex,7,2);//對分頁效果進行調用，這裡設定左邊顯示7個頁碼，右邊顯示2個頁碼。

}

//////////////////////////////為頁碼綁定事件

$("div.pageDivs").find("a:visible").live("click",function(){
var result=$(this).attr("page");
if((typeof $(this).attr("leaf"))!= 'undefined'){
$(this).removeAttr("href").removeClass("disabled").addClass("current").siblings().removeClass("current").addClass("disabled").attr("href","#");}

page(result);
});
});

這樣就行了，以上分頁的演算法是可以封裝的，與具體的項目沒關係，可以通用。

jQuery,table,josn,動態產生分頁

<table cellpadding="0" cellspacing="0" border="0" id="shop">
<thead>
<tr>
<th> </th>
<th>Title</th>
<th>Author(s)</th>
<th>Publish Date</th>
<th>Price</th>
</tr>
</thead>
<tbody>
<tr>
<td>
<img src="./img/1.gif" width="97" height="25" alt="Buliding Website"/>
</td>
<td>E見周五為歐式的方式浪費時間都</td>
<td>Nagen Graf</td>
<td>May 2004</td>
<td>$50.09</td>
</tr>
<tr>
</tbody>
</table>
<script type="text/javascript">
$(document).ready(function()
{
var $table = $('table');
//分頁效果
var currentPage = 0; //當前頁
var pageSize = 10; //每頁行數（不包括表頭）
//綁定分頁事件
$table.bind('repaginate', function()
{
$table.find('tbody tr').hide()
.slice(currentPage * pageSize, (currentPage + 1) * pageSize).show();
});

var numRows = $table.find('tbody tr').length; //記錄宗條數
var numPages = Math.ceil(numRows/pageSize); /......餘下全文>>
 
Jquery + Json 前台Table動態分頁

你和我做的差不多
in <html>
<table id="text">
</table>
其他的我都是動態產生的

in Javascript:

var tblHead="<thead> <th>...</th></thead>";
var tblRow =“<tbody>”;
//here insert JSON objects into each row by a look or by Jquery.each()
tblRow+= .....;
// end of the loop

tblRow+="</tbody>";
$(tblHead).appendTo("#test");
$(tblRow).appendTo("resultsTable tbody");
ps: 如果之後還要對contents有改動 那麼後面的method需要和上面的寫在一個function裡 因為是動態 我調用了Jquery libray $ 省去了documents.getElementById (getElementTagName)因為上手就是用的這個