在加载页面的时候发出一个请求,用ajax请求就可以,请求返回结果是获取所需要的所有信息,存在一个js对象里
创新互联是一家专业提供宣汉企业网站建设,专注与成都网站建设、网站制作、H5响应式网站、小程序制作等业务。10年已为宣汉众多企业、政府机构等服务。创新互联专业网站制作公司优惠进行中。
//success是请求成功后的返回函数,msg代表的是服务端的返回值,也就是你需要的那些信息
可以将这些信息存到ListUser里,然后再将list转成JSONArray返回,msg就是返回值
var dataObj;
$.ajax({
url:"yourservlet",
type:"POST",
data:"你请求的参数,随便填,只要后台接收了然后调用业务层进行查询返回结果就行",
success:function(msg){
dataObj=msg;
alert("返回成功");
}
});
//之后已经获取到了数据到浏览器,需要根据页数来分页,就是遍历数组了,dataObj就是一个
json对象,根据你的每页数量和页数来获取,这就是思路
一、分页
分页的基本思想是根据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插件的服务端分页获取数据。
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
实现效果: