Jquery DataTables 服务器后端分页 Ajax请求添加自定义参数.

项目使用AdminLTE(基于Bootstrap 二次开发的框架)作为开发框架.

使用DataTables 的时候部分页面需要传参 给后台做筛选过滤.

但是不知道怎么将DataTables的参数 和自定义的参数一起传过去.

刚开始想自己组建参数 将查询结果重新封装. 测试代码如下👇()

$('#xxx').DataTable({
    "language": Language,
    "paging": true,
    "lengthChange": true,
    "searching": true,
    "ordering": false,
    "info": true,
    "autoWidth": false,
    "lengthChange": false,
    "serverSide": true,//交由服务端处理 开启
    "ajax": function (data, callback, settings) {
        //封装请求参数
        var option = {
            BeginTime: $('#BeginTime').val(),
            EndTime: $('#EndTime').val(),
            UserId: $('#UserId').val(),
            PageDirection: 0,
            CurrentPageIndex: 0,
            Count: 2,
        };
        var vData = jsonPost("/uri", option);
        //需要做异常处理
        var returnData = {};
        returnData.draw = vData.PageDirection;
        returnData.recordsTotal = vData.PageCount;
        returnData.recordsFiltered = vData.Datas.length;
        returnData.data = vData.Datas;
        callback(returnData);
    },
});

后来觉得.这样我还要再获取当页码什么的 很麻烦. 

就再次查阅了JQuery DataTables 的文档

https://datatables.net/manual/server-side 这里有说明 当启用服务端处理时.DataTables 会自动向服务端发送一些参数. 以便服务端做处理.

知道了启用服务端处理后 DataTables 将会自动发送请求后.再找DataTables Ajax 添加/修改 参数. 连接如下 👇

https://datatables.net/reference/option/ajax.data   

下面👇是几种添加参数的例子 我们可以按照需求进行选择.

因为我后台用的是对象参数 所以我选择的是第三种 Return an object.

回到后台 ,在自己的RequestDto 中添加我们需要处理的参数(DataTables 本身自带的参数 例: 页码, 请求数据量,偏移量 ....)就行了.

修改后的代码 👇

$('#xxxx').DataTable({
    "language": Language,
    "paging": true,
    "lengthChange": true,
    "searching": true,
    "ordering": false,
    "info": true,
    "autoWidth": false,
    "lengthChange": false,
    "serverSide": true,//交由服务端处理 开启
    "ajax": {
        "url": "/Financial/SelectTransferRecord",
        "type": "POST",
        "data": function (d) {
            return $.extend({}, d, {
                BeginTime: $('#BeginTime').val(),
                EndTime: $('#EndTime').val(),
                UserId: $('#UserId').val(),
            });
        }
    },
});

后端接收参数Class 👇

    public class ReqDto
    {
        public DateTime BeginTime { get; set; }
        public DateTime EndTime { get; set; }
        public string UserId { get; set; }
        public int draw { get; set; }
        public int length { get; set; }
        public int start { get; set; }
    }

查询方法 

        public JsonResult Serch(ReqDto req)
        {
            var result = GetList(req);
            //需添加DataTables 必须的参数
            var jsonResult = new
            {
                draw = result.Draw,
                recordsTotal = result.Total,
                recordsFiltered = result.Count,
                data = result.Datas
            };
            return Json(jsonResult);
        }    

 

必要参数列表

文档地址 https://datatables.net/manual/server-side

结束,告辞