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传递给了后端什么参数


这是请求过程中截取的数据(对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

©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 206,723评论 6 481
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 88,485评论 2 382
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 152,998评论 0 344
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 55,323评论 1 279
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 64,355评论 5 374
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 49,079评论 1 285
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 38,389评论 3 400
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 37,019评论 0 259
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 43,519评论 1 300
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 35,971评论 2 325
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 38,100评论 1 333
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 33,738评论 4 324
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 39,293评论 3 307
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 30,289评论 0 19
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 31,517评论 1 262
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 45,547评论 2 354
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 42,834评论 2 345

推荐阅读更多精彩内容