本文實例講述了jQuery實現(xiàn)偽分頁的方法。分享給大家供大家參考，具體如下：
可以對表格數(shù)據(jù)進行偽分頁，而且只需要執(zhí)行簡單的代碼就可以實現(xiàn)。
實現(xiàn)的很簡單、樣式也不太好看，大家可以自行調(diào)整，糾正。
下面是一個table,tbody里加載tr數(shù)據(jù)，無論你怎么加載，
在數(shù)據(jù)加載完成后便可以對table數(shù)據(jù)進行偽分頁、注意div引用的class,我填充的數(shù)據(jù)是四列的，所以td里加了colspan，div是分頁顯示區(qū)域
<table> <tbody id="dialog-items"> </tbody> <tfoot> <tr> <td colspan="4"> <div id="maskPage" class="page_btn"> </div> </td> </tr> </tfoot></table>
下面是css和js方法
.page_btn{padding-top:0px;}.page_btn a{cursor:pointer;padding:5px;border:solid 1px #ccc;font-size:12px;}.page_box{float:right;}.num{padding:0 10px;} js方法如下
//對tbody偽分頁；pageDiv：用于顯示分頁數(shù)據(jù)的div tbodyId :tbody的ID，pageSize，分頁數(shù)目function pagiNation(pageDiv,tbodyId,pageSize){ $("#"+tbodyId+" tr:gt("+(pageSize-1)+")").hide();//初始化，前面pageSize-1條數(shù)據(jù)顯示，其他的數(shù)據(jù)隱藏。 var total_q=$("#"+tbodyId+" tr").length;//總數(shù)據(jù) var current_page=pageSize;//每頁顯示的數(shù)據(jù) var current_num=1;//當前頁數(shù) var total_page= Math.ceil(parseFloat(total_q)/parseFloat(current_page));//總頁數(shù) var pagePlugIn = "<span class=/"page_box/">"+ "<a id=/""+tbodyId+"_prev/" class=/"prev/">上一頁</a>"+ "<span id=/""+tbodyId+"_num/" class=/"num/">"+ "<span id=/""+tbodyId+"_current_page/" class=/"current_page/">1</span>"+ "<span style=/"padding:0 3px;/">/</span>"+ "<span id=/""+tbodyId+"_total/" class=/"total/"></span></span>"+ "<a id=/""+tbodyId+"_next/" class=/"next/">下一頁</a>"+ "</span>"; $("#"+pageDiv+"").html(pagePlugIn); var next=$("#"+tbodyId+"_next");//下一頁 var prev=$("#"+tbodyId+"_prev");//上一頁 $("#"+tbodyId+"_total").text("");//顯示總頁數(shù) $("#"+tbodyId+"_total").text(total_page);//顯示總頁數(shù) $("#"+tbodyId+"_current_page").text("");//當前的頁數(shù) $("#"+tbodyId+"_current_page").text(current_num);//當前的頁數(shù) //下一頁 $("#"+tbodyId+"_next").unbind("click"); $("#"+tbodyId+"_next").click(function(){ if(current_num==total_page){ return false;//如果大于總頁數(shù)就禁用下一頁 } else{ $("#"+tbodyId+"_current_page").text(++current_num);//點擊下一頁的時候當前頁數(shù)的值就加1 $.each($("#"+tbodyId+" tr"),function(index,item){ var start = current_page* (current_num-1);//起始范圍 var end = current_page * current_num;//結(jié)束范圍 if(index >= start && index < end){//如果索引值是在start和end之間的元素就顯示，否則就隱 $(this).show(); }else { $(this).hide(); } }); }});//上一頁方法$("#"+tbodyId+"_prev").unbind("click");$("#"+tbodyId+"_prev").click(function(){ if(current_num==1){ return false; }else{ $("#"+tbodyId+"_current_page").text(--current_num); $.each($("#"+tbodyId+" tr"),function(index,item){ var start = current_page* (current_num-1);//起始范圍 var end = current_page * current_num;//結(jié)束范圍 if(index >= start && index < end){//如果索引值是start和end之間的元素就顯示，否則就隱藏 $(this).show(); }else { $(this).hide(); } });}}) $("#"+pageDiv+"").show();} 頁面引用css和js，加載完成數(shù)據(jù)后，
function fillTabl(){ ...................... 數(shù)據(jù)填充............. .......................... pagiNation('maskPage','dialog-items',10); //傳入div的id,tbody的id,還有分頁數(shù)} 效果如下：
更多關(guān)于jQuery相關(guān)內(nèi)容感興趣的讀者可查看本站專題
