DataTables服务器分页自定义参数传递方法

本文深入剖析了在 DataTables 启用服务器端分页（`serverSide: true`）时，如何可靠地将页面上动态输入的搜索参数（如文本框、下拉框、日期选择器的值）实时传递至后端 MVC 控制器——直击“参数始终为 null”的常见顽疾，揭示根本原因在于错误地将 `data` 配置为静态对象而非动态函数，并给出标准、健壮的解决方案：通过 `ajax.data` 函数在每次请求前即时读取 DOM 最新值，配合空值防护、API 升级建议与控制器签名适配，确保分页、排序、刷新等所有操作均携带准确搜索条件，真正实现响应式、可维护的服务器端数据筛选体验。

本文详解如何在使用 DataTables 的 `serverSide: true` 模式时，正确将用户输入的搜索值（如文本框内容）通过 AJAX 动态传入 MVC 控制器，避免因执行时机错误导致参数为 null 的常见问题。

在使用 DataTables 实现服务器端分页（serverSide: true）时，一个高频痛点是：无法将页面上动态输入的搜索条件（例如 <input id="searchValue">）可靠地随每次 AJAX 请求一并提交到后端。你可能会发现：虽然 $("#searchValue").val() 在控制台打印出正确值，但控制器接收到的对应参数始终为 null。

根本原因在于：你当前的写法

data: {
    'search_value': window.searchValue
}

是在 DataTables 初始化时一次性求值并固化的——此时 window.searchValue 还未被赋值（或仍为 undefined），后续修改该变量不会自动同步到 AJAX 请求中。即使你点击按钮更新了 window.searchValue，DataTables 并不会重新读取这个字段。

✅ 正确解法：使用 data 作为函数，确保每次发起 AJAX 请求前实时获取最新值：

var Table = $('#work-order-table').DataTable({ // 注意：推荐使用 DataTable() 而非已废弃的 dataTable()
    processing: true,
    serverSide: true,
    scrollX: true,
    scrollY: 600,
    scrollCollapse: true,
    stateSave: true, // 替代已废弃的 bStateSave
    stateSaveCallback: function(settings, data) {
        localStorage.setItem('work-order-table', JSON.stringify(data));
    },
    stateLoadCallback: function(settings) {
        return JSON.parse(localStorage.getItem('work-order-table'));
    },
    ajax: {
        url: '@Url.Action("FilterList")',
        method: 'POST',
        data: function(d) {
            // ✅ 每次请求前动态注入参数
            d.search_value = $("#searchValue").val() || '';
            d.name_value = $("#nameList").val() || '';
            d.date_value = $("#dateValue").val() || '';
            // 可选：保留 DataTables 默认参数（如 draw、start、length 等）
            // d 已包含这些，无需额外处理
        }
    },
    // 其他列配置...
});

? 关键要点说明：

• data 接收一个函数，DataTables 会在每次 AJAX 请求发出前调用它，并将默认参数对象 d 传入；你只需在此函数内为 d 添加自定义属性即可；
• 不再依赖全局变量或预存值，彻底规避“值已过期”问题；
• 使用 || '' 防止 undefined 或 null 被序列化为字符串 "undefined"，提升后端模型绑定健壮性；
• 注意：fnFilter() 是客户端过滤方法，与服务器端分页无关，此处无需调用（删除 Table.fnFilter(this.value) 可避免混淆）；
• 建议升级至 DataTables 1.10+ API（如 DataTable()、stateSave），旧版 dataTable() 和 fnStateSave 已弃用。

最后，在 MVC 控制器中，确保 Action 方法签名能接收这些额外参数：

public ActionResult FilterList(int draw, int start, int length, 
                              string search_value = "", 
                              string name_value = "", 
                              string date_value = "")
{
    // 构建查询逻辑，使用 search_value 等进行数据库过滤
    // 返回 JsonResult 包含 data、recordsTotal、recordsFiltered、draw
}

这样，用户点击搜索按钮后触发的每一次 DataTables 刷新（包括分页、排序、重绘），都将携带最新的搜索值，实现真正响应式的服务器端筛选。

今天带大家了解了的相关知识，希望对你有所帮助；关于文章的技术知识我们会一点点深入介绍，欢迎大家关注golang学习网公众号，一起学习编程~