带有附加变量的 JQuery DataTables 服务器端处理答案

【问题标题】：JQuery DataTables serverside processing with additional variables带有附加变量的 JQuery DataTables 服务器端处理
【发布时间】：2015-03-10 04:13:33
【问题描述】：

我一直在尝试使用 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 个下拉菜单，这些下拉菜单根据 2 个列（级别和源）过滤所有内容：

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

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

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

我只能假设问题在于：

data: aoData

和

data: {
    param: aoData
},

在 ajax 调用中。

【问题讨论】：

标签： jquery ajax razor datatable server-side

【解决方案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

【讨论】：