jQuery实现伪分页的方法分享

本文实例讲述了jQuery实现伪分页的方法。分享给大家供大家参考，具体如下：

可以对表格数据进行伪分页，而且只需要执行简单的代码就可以实现。

实现的很简单、样式也不太好看，大家可以自行调整，纠正。

下面是一个桌子，tbody里加载tr数据，无论你怎么加载，

在数据加载完成后便可以对桌子数据进行伪分页、注意差异引用的同学们，我填充的数据是四列的，所以任务描述里加了科尔斯潘，div是分页显示区域

表t body id=' dialog-items '/t body tfoot tr TD colspan=' 4 ' div id=' mask page ' class=' page _ BTN '/div/TD/tr/tfoot/table下面是钢性铸铁和射流研究…方法。page _ BTN { padding-top :0 px；}.page _ BTN a { cursor : pointer padding :5 pxborder : solid 1px # CCC font-size :12 px；}.page _ box { float:right}。num { padding:0 10px } js方法如下

//对tbody伪分页；页面设计：用于显示分页数据的div tbodyId :tbody的标识，页面大小，分页数目函数分页(pageDiv，tbodyId，页面大小){ $(' # ' tbodyId ' tr : gt '(页面大小-1)')').hide()；//初始化，前面页面大小-1条数据显示，其他的数据隐藏var total_q=$('#' tbodyId ' tr ').长度；//总数据var current _ page=pageSize//每页显示的数据var current _ num=1；//当前页数var total _ page=数学。ceil(parseFloat(total _ q)/parseFloat(current _ page))；//总页数var PagePlugin=' span class=\ ' page _ box \ ' a id=\ ' Tbody id ' _ prev ' class=\ ' prev \ '上一页/a " span id=\ " TboDi " _ num " class=\ " num " span id=\ " TboDi " _ current _ page " class=\ " current _ page " 1/span " span " style=\ " padd :0 3px；\ '//span ' ' span id=\ ' ' tbodyId ' _ total ' class=\ ' total \ '/span/span ' ' a id=\ ' ' tbodyId ' _ next ' class=\ ' next \ '下一页/a ' '/span '；$(“#”PageDiv“”).html(页面插件)；var next=$(' # ' tbodyId ' _ next ')；//下一页var prev=$(' # ' tbodyId ' _ prev ')；//上一页$('#' tbodyId '_total ').文本("");//显示总页数$('#' tbodyId '_total ').文本(total _ page)；//显示总页数$(' # ' TboDd ' _ current _ page ').文本("");//当前的页数$(' # ' TboDd ' _ current _ page ').文本(current _ num)；//当前的页数//下一页$("#"tbodyId"_ next ").解除绑定("点击");$("#"tbodyId"_ next ").单击(function(){ if(current _ num==total _ page){ return false；//如果大于总页数就禁用下一页} else { $(' # ' tbodyId ' _ current _ page ').文本(current _ num)；//点击下一页的时候当前页数的值就加1 $.每个($('#' tbodyId ' tr ')，函数（索引、项){ var start=current _ page *(current _ num-1)；//起始范围var end=current _ page * current _ num；//结束范围if(索引=开始索引结束){//如果索引值是在开始和目标之间的元素就显示，否则就隐$(这个)。show()；}else { $(this).hide()；} });}});//上一页方法$('#' tbodyId '_prev ').解除绑定("点击");$('#' tbodyId '_prev ').单击(function(){ if(current _ num==1){ return false；} else { $(' # ' tbodyId ' _ current _ page ').text(-current _ num)；$.每个($('#' tbodyId ' tr ')，函数（索引、项){ var start=current _ page *(current _ num-1)；//起始范围var end=current _ page * current _ num；//结束范围if(索引=开始索引结束){//如果索引值是开始和目标之间的元素就显示，否则就隐藏$(这个)。show()；}else { $(this).hide()；} });}}) $('#' pageDiv ' ').show()；}页面引用钢性铸铁和js，加载完成数据后，

函数FillTabl(){ 0...数据填充.....分页(' maskPage '，' dialog-items '，10)；//传入差异的id，tbody的id，还有分页数}效果如下：

更多关于jQuery相关内容感兴趣的读者可查看本站专题： 《jQuery扩展技巧总结》 、 《jQuery常见经典特效汇总》 、 《jQuery常用插件及用法总结》 、 《jquery中Ajax用法总结》 及《jquery常用操作技巧汇总》

希望本文所述对大家jQuery程序设计有所帮助。