datatables分页没有ajax数据,datatables实现后端分页

使用datatables的一些总结

后端分页

在一开始的迭代中，使用的是默认的前端分页，但这个肯定性能是不行的，而后改为后端分页时，遇到的一些坑。

也许是我看文档不够仔细，datatables的文档看的我有些痛苦。在结合例子和度娘的情况下，捣鼓出来了

// 实例化ajax方法，实现后端分页

$.fn.dataTable.ajax = function(options) {

var conf = $.extend({

method: 'GET',

}, options);

return function(request, drawCallback, settings) {

var param = {};

param.size = request.length;//页面显示记录条数，在页面显示每页显示多少项的时候

param.start = request.start;//开始的记录序号

param.page = (request.start / request.length);//当前页码

$.extend(param, request)

$.extend(param, conf.data)

delete param.columns; // 移除列

settings.jqXHR = $.ajax({

type: conf.method,

url: conf.url,

data: param,

success: function(data) {

var params = {};

params.draw = param.draw; // 一定注意这个draw

params.recordsTotal = data.page.totalElements; // 数据总数

params.recordsFiltered = data.page.totalElements;// 过滤后的总数，我这里和总数一致

params.data = data._embedded[conf.dataSrc];

drawCallback(params);

}

})

}

}

复制代码

这里要说下这个draw参数，之前没有在意这个参数，导致请求了第二页的数据，表格不刷新，还是第一页的数据，文档上的说明是：前端请求时带draw参数，返回时后端一并返回，防止ajax异步导致数据返回不对应的问题。

接下来就是使用这个方法去创建表格

$("#tickets").DataTable({

serverSide: true, // 设置为后端分页

ajax: $.fn.dataTable.ajax({

url: '/api/demands',

data: { size: 10},

dataSrc: 'demands',

}),

columns: [...],

});

复制代码