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

结束,告辞

转载于:https://www.cnblogs.com/SantiagoZhang/p/10190743.html

  • 0
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值