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

結束,告辭