jquery分页,jquery分页插件pagination下载

http://www.itjxue.com  2023-01-14 06:50  来源:未知  点击次数: 

在jQuery中如何实现动态数据分页

script?language="javascript"

var?pagesize=5;//每页显示几条信息

var?totalRecord=$("#PageCon?li").length;//获取信息的总数

//计算总页数

var?totalPages=totalRecord?%?pagesize?==?0???totalRecord?/?pagesize?:?Math.ceil(totalRecord?/?pagesize);

$(function(){??

????$('#PageShowUL').twbsPagination({????????

????????totalPages:?totalPages,//总页数????????

????????visiblePages:7,//显示的页数????????

????????version:'1.1',//或1.0??1.1是自动根据当前页动态显示页码??????

????????first:"首页",????

????????prev:"下一页",????

????????next:"上一页",????

????????last:"尾页",????????

????????onPageClick:?function?(event,page)?{??????????

????????????$("#PageCon?li").hide();????????????

????????????$("#PageCon?li").slice((page-1)*pagesize,page*pagesize).show();????????

????????}????

????});????????

});

/script

具体的看这里:

twbs-pagination分页插件的实际应用实例

jquery怎么动态实现表格分页

jquery动态实现表格分页的方法是利用自带的分页插件jQuery.page.js。

下面是使用方法:

$(".tcdPageCode").createPage({

? ? ? pageCount:10,

? ? ? current:1,

? ? ? backFn:function(p){

? ? ? ? ? //单击回调方法,p是当前页码

? ? ? }

? });

? pageCount:总页数

? current:当前页

实现分页的tab如下:

div class="tcdPageCode"

span class="disabled"上一页/span

span class="current"1/span

a href="javascript:;" class="tcdNumber"2/a

a href="javascript:;" class="tcdNumber"3/a

a href="javascript:;" class="tcdNumber"4/a

span.../span

a href="javascript:;" class="tcdNumber"6/aa href="javascript:;" class="nextPage"下一页/a/div

实现效果:

jquery datatable如何动态分页

一、分页

分页的基本思想是根据datatable的页码及每页显示的行数,将数据从数据库分段提出,然后再填充到表格中,以达到分页的效果。

这里需要用到datatable插件的几个属性:

"sEcho":这个属性需要原封不动地传回给datatable,具体的作用我也不清楚,但是根据它值的变化情况来看,好像是一个操作次数的计数(之前我一直把它当做是pageindex来用,结果发现,不论我在datatable中是翻下一页还是翻上一页,它一直在增加。)

"iDisplayStart":这个属性,根据字面意思理解,就是每段数据开始的行数,比如第一页的数据就是从0开始计,那么它就是0,每页显示的行数是10,那么第二页的第一行的iDisplayStart就是10。

"iDisplayLength":这个属性就是每页显示的行数。

然后是数据库操作,只需要从数据库查询其中一段数据,然后输出出来,转成JSON格式,让datatable插件获取。在网上可以找到很多分页的方法,选择了其中一种,使用row_number()的分页的存储过程。具体代码如下(根据sql创建存储过程模板):

存储过程的两个参数,pageindex表示页索引即当前页码,不懂datatable有没有这项属性,所以是用计算的方法得来的,就是iDisplayStart/iDisplayLength+1。pagesize可以直接从datatable获得。

服务端的代码,我创建了一个datasource.ashx文件,代码如下:

DataTableToObjects类的代码如下:

需要注意的一点:iTotalRecords与iTotalDisplayRecords是两个不同的值,是改变分页栏显示用的参数,这里因为没有考虑数据过滤功能,所以都设置成数据的总的行数。

然后是客户端的代码,与之前的差不多:

因为测试,所以只提取了表中的三个字段,并且关闭了数据过滤及排序功能,其中,"bLengthChange"可以设置成true,因为服务端会获取datatable的iDisplayLenth参数,即使每页显示数变化,数据也可以正常获取。

这样就实现了jquery.datatable插件的服务端分页获取数据。

(责任编辑:IT教学网)

更多

推荐通讯数据软件文章