一、分页
分页的基本思想是根据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插件的服务端分页获取数据。
$(p).pagination({pageSize:defaultPageSize, //每页显示的记录条数,默认为10
pageList:[5, 10, 15], //可以设置每页记录条数的列表
beforePageText:'第', //页数文本框前显示的汉字
afterPageText:'页共 {pages} 页',
displayMsg:'当前显示 {from} - {to} 条记录 共 {total} 条记录',
showRefresh:false,
onSelectPage:function(pageNumber,pageSize){
queryList()
}
})
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</a><a href="javascript:" class="nextPage">下一页</a></div>
实现效果:
欢迎分享,转载请注明来源:内存溢出
评论列表(0条)