jQuery实现伪分页的方法分享

本文实例讲述了jQuery实现伪分页的方法。分享给大家供大家参考，具体如下：
可以对表格数据进行伪分页，而且只需要执行简单的代码就可以实现。
实现的很简单、样式也不太好看，大家可以自行调整，纠正。
下面是一个table,tbody里加载tr数据，无论你怎么加载，
在数据加载完成后便可以对table数据进行伪分页、注意div引用的class,我填充的数据是四列的，所以td里加了colspan，div是分页显示区域

<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：用于显示分页数据的div tbodyId :tbody的ID，pageSize，分页数目function pagiNation（pageDiv,tbodyId,pageSize）{$（"#"+tbodyId+" tr:gt（"+（pageSize-1）+"）"）.hide（）;//初始化，前面pageSize-1条数据显示，其他的数据隐藏。var total_q=$（"#"+tbodyId+" tr"）.length;//总数据var current_page=pageSize;//每页显示的数据var current_num=1;//当前页数var total_page= Math.ceil（parseFloat（total_q）/parseFloat（current_page））;//总页数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（""）;//显示总页数$（"#"+tbodyId+"_total"）.text（total_page）;//显示总页数$（"#"+tbodyId+"_current_page"）.text（""）;//当前的页数$（"#"+tbodyId+"_current_page"）.text（current_num）;//当前的页数//下一页 $（"#"+tbodyId+"_next"）.unbind（"click"）; $（"#"+tbodyId+"_next"）.click（function（）{ if（current_num==total_page）{return false;//如果大于总页数就禁用下一页 } else{ $（"#"+tbodyId+"_current_page"）.text（++current_num）;//点击下一页的时候当前页数的值就加1 $.each（$（"#"+tbodyId+" tr"）,function（index,item）{ var start = current_page* （current_num-1）;//起始范围 var end = current_page * current_num;//结束范围 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;//结束范围if（index >= start && index < end）{//如果索引值是start和end之间的元素就显示，否则就隐藏$（this）.show（）;}else {$（this）.hide（）;}}）;}}）$（"#"+pageDiv+""）.show（）;}

页面引用css和js，加载完成数据后，

function fillTabl（）{ ...................... 数据填充............. .......................... pagiNation（"maskPage","dialog-items",10）; //传入div的id,tbody的id,还有分页数}

效果如下：

更多关于jQuery相关内容感兴趣的读者可查看本站专题：《jQuery扩展技巧总结》、《jQuery常见经典特效汇总》、《jQuery常用插件及用法总结》、《jquery中Ajax用法总结》及《jquery常用操作技巧汇总》
希望本文所述对大家jQuery程序设计有所帮助。