使用datatable进行服务端分页

分页有两种,一种是前台分页,一种是后台分页,所谓的前台分页就是一次把所有数据查出,然后在前台只展示部分数据,后台分页就是每次只查出特定页的数据,每次翻页时再去数据库查询。前段时间使用了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");
}



你可能感兴趣的:(使用datatable进行服务端分页)