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: [...],
    });