JQuery 使用附加变量的 DataTables 服务器端处理

Question

我一直在尝试使用 JQuery 数据表和服务器端处理来实现显示日志的解决方案。这在很大程度上是成功的。数据表声明如下：

$('#IndexTable').dataTable({
    "bServerSide": true,
    "oLanguage": {
    "sSearch": "<div class='editor-label-wide float-left'>" +
        "Search : " +
            "</div>" +
            "<div class='editor-field float-left'>" +
                "_INPUT_" +
            "</div>" +
            "<div class='clear-left'>" +
                "<br/>" +
            "</div>",
        "sLengthMenu": "<div class='editor-label-wide float-left'>" +
                      "Display : " +
            "</div>" +
            "<div class='editor-field float-left'>" +
                "_MENU_" +
            "</div>" +
            "<div class='clear-left'>" +
                "<br/>" +
            "</div>",
        "sInfo": "<br/>Showing _START_ to _END_ of _TOTAL_ records",
},
"bDestroy": true,
"sAjaxSource": '@Url.Action("List")',
"fnServerData": function (sSource, aoData, fnCallback) {
    $.ajax({
        dataType: 'json',
        type: "POST",
        url: sSource,
        data: aoData,
        success: fnCallback,
        error: function (jqXHR, textStatus, errorThrown) { alert('Error getting logs:' + errorThrown) }
    })
},
"bPaginate": true,
"sPaginationType": "full_numbers",
"iDisplayLength": 25,
"aLengthMenu": [[10, 25, 50, 100], [10, 25, 50, 100]],
"aoColumnDefs": [
    { "sName": "Level", "aTargets": [0], "mDataProp": "LogLevel" },
    { "sName": "Source", "aTargets": [1], "mDataProp": "LogSource" },
    { "sName": "Date", "aTargets": [2], "mDataProp": "LogDate" },
    { "sName": "Text", "aTargets": [3], "mDataProp": "LogText" }
    ]
});

然后，控制器动作：

public JsonResult List(jQueryDataTableParamModel param)
{ ... }

其中 jQueryDataTableParamModel 的结构如 here 所示。

这非常适合显示、分页、搜索和排序。问题是，我有 2 个 drop-downs，当我仍然进行处理时使用 client-side，它根据 2 个列（级别和源）过滤所有内容：

为此，我需要在 List 操作方法中选择值。我试图通过简单地在方法中添加参数并传递它们来做到这一点。

data: {
    param: aoData,
    levelId: $("#LevelList").val(),
    sourceId: $("#SourceList").val()
},

这样做是可行的，但是 jQueryDataTableParamModel 中的所有字段都是 null:

我只能假设问题在于以下两者之间的差异：

data: aoData

和

data: {
    param: aoData
},

在 ajax 调用中。

Answer 1

我通过执行以下操作解决了这个问题：

"ajax": {
    "url": "@Url.Action("List")",
    "type": "POST",
    'contentType': 'application/json; charset=utf-8',
    'data': function (data) {
        var tempData = {};
        tempData.pageRequest = data;

        // To addd custom parameters:
        // tempData.customParameter1 = $("#CustomParam").val()

        tempData.levelId = $("#LevelId").val();
        tempData.sourceId = $("#SourceId").val();

        return JSON.stringify(tempData);
    }
},

然后在控制器操作中收到这些：

public JsonResult List(DataTablesPageRequest pageRequest, int levelId, int sourceId)
{ ... }

注意：我必须将我的 DataTables 版本从 1.9.2 更新到 1.10.5

JQuery 使用附加变量的 DataTables 服务器端处理

JQuery DataTables serverside processing with additional variables

jquery

ajax

razor

datatable

server-side