datatable分页php,datatable的后台分页功能

后台数据太多,如果一下子加载出来后在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传递给了后端什么参数

275493e0b922

这是请求过程中截取的数据(对datatable 显示行已做了模糊处理)。

sEcho:可以理解为请求的次数,这个需要在后端数据返回时+1的

iColumns:代表的是datatable需要展示的列数

iDisplayStart:代表服务端在拿数据时从第几个数据开始拿起

iDisplayLength:代表每次请求需要拿多少数据

后面接下来的都是要展示的列名

接受到这些数据,服务端需要做什么

1、服务端需要根据iDisplayStart和iDisplayLength这两个字段的值,拿出匹配的数据量返回

2、服务端除了返回结果,还需要返回三个字段,

sEcho:需要+1后返回

recordsTotal:返回的是一共有多少数据要展示,而不是当前返回的数据哦。

比如你数据库一共有20条数据,但是本次展示只需要展示5条,那你就需要把20这个数字填到

recordsTotal中并返回给前端,前端才知道要分多少页去展示

recordsFiltered:这个的数值跟recordsTotal一样,但具体不知道什么作用

这三个值填完后,加上所需的数据返回,就可以获得我们想看的结果了

效果图如下

275493e0b922

可能会有疑虑,收到iDisplayStart和iDisplayLength两个字段后,数据库的查询要怎么修改才能有相应的结果

由于我用的是mysql,我的查询语句如下

limit x,y  x 代表查询的数据从第几行开始,y代表查询长度

所以数据库查询语句修改如下:

SELECT * FROM TABLE LIMIT iDisplayStart,iDisplayLength

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值