如何在 DataTables 服务器端分页中动态传递自定义搜索参数

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

在使用 DataTables 实现服务器端分页（serverSide: true）时，一个高频痛点是：无法将页面上动态输入的搜索条件（例如 ）可靠地随每次 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 刷新（包括分页、排序、重绘），都将携带最新的搜索值，实现真正响应式的服务器端筛选。