分页有两种,一种是前台分页,一种是后台分页,所谓的前台分页就是一次把所有数据查出,然后在前台只展示部分数据,后台分页就是每次只查出特定页的数据,每次翻页时再去数据库查询。前段时间使用了datatable插件进行分页的时候,要用到服务端分页,虽然查到了好多demo,但是用的不明不白的,后面自己看了又看,整理出了一些眉目。
1,前端html代码:
//这一步是导入datatable的插件,我的是下载到了本地,也可以直接引用官网的源文件
错误码
错误信息
报错时间
2,js代码:
$(document).ready(function() {
$('#datas').find('a[data-type="search"]').on('click', function(event) {
//前台得到的一些参数
var beginDate = $('#time-begin').val(); var endDate = $('#time-end').val(); var p = { beginDate: beginDate == '' ? '' : beginDate + ' 00:00:00', endDate: endDate == '' ? '' : endDate + ' 00:00:00' }; var otable = $('#data_list').DataTable({ "sPaginationType": "full_numbers", // "oLanguage": { // 汉化
分页的显示可以在实现功能后自己调节 // "sProcessing": "正在加载数据...", // "sLengthMenu": "显示_MENU_条 ", // "sZeroRecords": "没有您要搜索的内容", // "sInfo": "从_START_ 到 _END_ 条记录——总记录数为 _TOTAL_ 条", // "sInfoEmpty": "记录数为0", // "sInfoFiltered": "(全部记录数 _MAX_ 条)", // "sInfoPostFix": "", // "sSearch": "搜索", // "sUrl": "", // "oPaginate": { // "sFirst": "第一页", // "sPrevious": " 上一页 ", // "sNext": " 下一页 ", // "sLast": " 最后一页 " // } // }, "bJQueryUI": true, "bPaginate": true, //翻页功能 "iDisplayLength" : 10,// 每页显示行数 "bStateSave": false,//状态保存,使用了翻页或者改变了每页显示数据数量,会保存在cookie中,下回访问时会显示上一次关闭页面时的内容,
要置为false "bInfo": true,//页脚信息 "bFilter" : false,// 搜索栏 "bLengthChange" : false, //改变每页显示条数 "bServerSide": true, //指定从服务器端获取数据
//一定要写,要为true "sAjaxSource": '/trade/gneteLog', //获取数据的url (一般是action) "aoColumns": [ //这个属性下的设置会应用到所有列,按顺序没有是空 { "mData": 'errorId' }, //mData 表示发请求时候本列的列明,返回的数据中相同下标名字的数据会填充到这一列 { "mData": 'detail' }, { "mData": 'time' } ], "fnServerData": function(sSource, aoData, fnCallback) {
// alert(JSON.stringify(aoData));
$.ajax({
"type": "get",
"contentType": "application/json",
"url": sSource,
"data": { //每次请求的参数,有自定义的参数,有分页需要的参数
aoData:JSON.stringify(aoData),
beginDate: beginDate == '' ? '' : beginDate + ' 00:00:00',
endDate: endDate == '' ? '' : endDate + ' 00:00:00'
},
"dataType": "json",//返回的参数类型
"success": function(resp) {
console.info('resp----' + resp.iTotalRecords);
fnCallback(resp);
return false;
}
});
}
});
return false;
});
fnServerData,这个很重要,里面的三个参数名字照写就行了,你可以加个alert,每次换页的时候里面的参数会变化;sSource其实就是上面的参数sAjaxSource的值,aoData里面保存了与分页有关的参数,最重要的是页数和每页记录数。
现在我们有了分页查询的参数了,接下来就是后台的分页查询了。后台的查询有很多实现方法,但是所有的原理都是一样,根据参数在数据库中查到所需要的数据,然后按特定的格式返回到前台,datatable可以自动帮我们在前台渲染参数,但是前提是你要告诉它它需要的参数。它需要哪些参数呢?首先,分页它要知道总记录数和每页记录数,这样第一次查询后他才知道你得查询一共是多少页啊,其次就是查询本页的数据。下面看几个参数。
var data_ = {
"iTotalRecords": data.iTotalRecords,
"iTotalDisplayRecords":data.iTotalDisplayRecords,
"aaData": data.list
}
iTotalRecords:总记录数
iTotalDisplayRecords:这个我也没搞清楚,我给的值是和总记录数一样
aaData:本次查询的数据
这段代码是用java代码解析aoData的参数的 "iDisplayStart":表示查询起始记录
"iDisplayLength":表示要查询的条数
JSONArray jsonarray = JSONArray.fromObject(aoData);
for (int i = 0; i < jsonarray.size(); i++) {
JSONObject obj = (JSONObject) jsonarray.get(i);
if (obj.get("name").equals("iDisplayStart"))
iDisplayStart = (Integer) obj.get("value");
if (obj.get("name").equals("iDisplayLength"))
iDisplayLength = (Integer) obj.get("value");
}