后台数据太多，如果一下子加载出来后在datatable上展示，会很慢。所以打算采用datatable的分页功能。
datatable的分页功能分为两种，分为前台分页和后台分页。
前台分页：只在展示数目上做切割。也就是后台从数据库中拿出来的数据还是一次性拿出来的，只是在前台展示时按照一定数量进行分页
后台分页：从后台数据库拿数据时就已经选择一定数量来拿，每次点击下一页都会发起一次数据拿取的请求。这样就不会因为一次性拿太多数据而拖慢加载速度。
我这个需求所需要的就是后台分页。
前端的代码如下：
$("#stabilityPerfTestResultTable").DataTable({
serverSide: true,
stateSave: true,
"bAutoWidth": false,
"bJQueryUI": false,
"iDisplayLength": 5,
"bDeferRender": false,
"bSort": false,
"bDestroy": true,
"bRetrieve": true,
"bFilter": false,
"sAjaxSource" :'/stabilityPerf/get/perfResult',
"bLengthChange": false,// 每行显示记录数
"bInfo": true,// Showing 1 to 10 of 23 entries 总记录数没也显示多少等信息
"bWidth": false,
"oLanguage": {
"sProcessing": "正在加载数据...",
"sLengthMenu": "每页显示 _MENU_ 条记录",
"sInfo": "从 _START_ 到 _END_ /共 _TOTAL_ 条数据",
"sInfoEmpty": "没有数据",
"sInfoFiltered": "(从 _MAX_ 条数据中检索)",
"sZeroRecords": "没有检索到数据",
"sSearch": "搜索:",
"oPaginate": {
"sFirst": "首页",
"sPrevious": "前一页",
"sNext": "后一页",
"sLast": "尾页"
}
},
"fnServerData" : function(sSource, aoData, fnCallback) {
aoData.push({"name":"taskId","value":taskId});
$("#loadingDataModal").modal('show');
$.ajax({
"type" : 'get',
"url" : sSource,
"async": true,
"dataType" : "json",
"data" : {
aoData : JSON.stringify(aoData)
},
"success" : function(resp) {
$("#stabilityPerfResult-table-body").empty();
fnCallback(resp);
}
})
},
"aoColumns":[
{"data": "sn"},
{"data": "cpuUsage"},
{"data": "cpuRate"},
{"data": "pssTotal"},
{"data": "pssTotalRate"},
{"data": "nativeHeap"},
{"data": "nativeRate"},
{"data": "dalvik"},
{"data": "dalvikRate"},
{"data": "io"},
{"data": "ioRate"},
{"data": "frame"},
{"data": "frameRate"},
{"data": "fragment"},
{"data": "fragmentRate"}
]
});
}
一些字段说明：
serverSide ：是否开启服务端分页，true为开启，false为关闭
iDisplayLength：前台展示的条数
sAjaxSource ：请求数据的url
"fnServerData" : function(sSource, aoData, fnCallback)：
这里的sSource就是请求数据的url，aoData是dataTable传递给后端的参数，如果自己有需要就可以再添加
aoColumns：要展示的列名，按顺序填好，并且后端返回的数据也按照这种形式排序，datatable就会自动将其填充
PS：在succes函数中，要使用$(#id).empty()；来清除上一次的datatable的展示，不然就会变成往后追加了。
完成了前端datatable的配置，就来看看datatable传递给了后端什么参数
这是请求过程中截取的数据（对datatable 显示行已做了模糊处理）。
sEcho：可以理解为请求的次数，这个需要在后端数据返回时+1的
iColumns：代表的是datatable需要展示的列数
iDisplayStart：代表服务端在拿数据时从第几个数据开始拿起
iDisplayLength：代表每次请求需要拿多少数据
后面接下来的都是要展示的列名
接受到这些数据，服务端需要做什么
1、服务端需要根据iDisplayStart和iDisplayLength这两个字段的值，拿出匹配的数据量返回
2、服务端除了返回结果，还需要返回三个字段，
sEcho：需要+1后返回
recordsTotal：返回的是一共有多少数据要展示，而不是当前返回的数据哦。
比如你数据库一共有20条数据，但是本次展示只需要展示5条，那你就需要把20这个数字填到
recordsTotal中并返回给前端，前端才知道要分多少页去展示
recordsFiltered：这个的数值跟recordsTotal一样，但具体不知道什么作用
这三个值填完后，加上所需的数据返回，就可以获得我们想看的结果了
效果图如下
可能会有疑虑，收到iDisplayStart和iDisplayLength两个字段后，数据库的查询要怎么修改才能有相应的结果
由于我用的是mysql，我的查询语句如下
limit x,y x 代表查询的数据从第几行开始，y代表查询长度
所以数据库查询语句修改如下：
SELECT * FROM TABLE LIMIT iDisplayStart,iDisplayLength
网友评论