本文详解如何在使用 datatables 的 `serverside: true` 模式时，正确将页面上用户输入的动态值（如搜索框内容）通过 ajax 提交至 mvc 控制器，避免因闭包、执行时机或数据绑定错误导致参数始终为 `null`。
在使用 DataTables 实现服务器端分页（serverSide: true）时，一个常见误区是试图在 ajax.data 中直接引用全局变量（如 window.searchValue）或静态 DOM 查询结果（如 $("#searchValue").val()）。问题在于：DataTables 在初始化时即对 data 对象进行一次求值并缓存，后续 AJAX 请求均复用该快照值，而非每次请求前动态获取最新输入。因此，即使你点击按钮更新了 window.searchValue，DataTable 并不会自动感知变化，导致控制器接收到的仍是初始 undefined 或空字符串。
正确的解决方案是使用 ajax.data 的函数形式（即 data: function(d) { ... }），它会在每次 AJAX 请求发起前被调用，确保获取到实时的 DOM 值。以下是优化后的完整配置示例：
$(document).ready(function () {
var table = $('#work-order-table').DataTable({
processing: true,
serverSide: true,
scrollX: true,
scrollY: 600,
scrollCollapse: true,
stateSave: true, // 推荐使用新 API：stateSave 替代已废弃的 bStateSave/fnState*
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() || '';
// 可选：添加调试标识便于后端日志追踪
d.timestamp = new Date().getTime();
}
},
// 其他列配置...
columns: [
{ data: "id" },
{ data: "title" },
{ data: "status" }
]
});
// 绑定搜索按钮，触发重载（非必需，但推荐显式控制）
$("#submitButton").on('click', function (e) {
e.preventDefault();
table.ajax.reload(); // ✅ 主动触发刷新，确保使用最新 data 函数返回值
});
// （可选）支持回车键提交
$("#searchValue").on('keypress', function (e) {
if (e.which === 13) {
e.preventDefault();
table.ajax.reload();
}
});
});⚠️ 关键注意事项：勿混用旧版 API：dataTable()（返回 jQuery 对象）已过时，应统一使用 DataTable()（返回 API 实例），以获得完整的链式调用与方法支持（如 ajax.reload()）；fnFilter() 不适用于服务器端模式：该方法仅用于客户端过滤，与 serverSide: true 冲突，应移除；MVC 控制器接收需匹配命名：确保 Action 方法参数名（或 ViewModel 属性名）与 d.xxx 中的键名严格一致（如 search_value → public ActionResult FilterList(string search_value)）；空值处理：建议使用 || '' 防止 undefined 或 null 传入后端，提升健壮性。
通过函数式 data 配置，你彻底解耦了参数采集时机与 DataTable 初始化逻辑，既保证了数据实时性，又无需维护全局状态或手动同步变量，是服务器端 DataTables 动态传参的标准实践。
