DataTable 排序在 Firefox 浏览器中失效的解决方案

firefox 下 datatable 第二次点击排序列无响应，根本原因是手动干预 `ajax.success` 并调用 `this.success()` 破坏了 datatable 内部状态机，尤其在 firefox 中触发了事件处理差异，导致 `draw()` 后排序状态未重置、`beforesend` 被跳过或重复执行逻辑错乱。

该问题并非浏览器兼容性缺陷，而是代码逻辑与 DataTable 设计原则冲突所致。核心症结在于：您在 beforeSend 中通过 this.success(lastResponse) 强行劫持 ajax 响应流程，绕过 DataTable 默认的数据加载与排序机制。chrome 可能因宽松的事件调度容忍此行为，但 Firefox 对 promise/回调时序更严格，导致第二次点击时 skipAjax = true 仍被触发，而 table.ajax.json() 返回 undefined（因首次请求尚未完成或缓存失效），进而引发 Cannot read Property ‘draw’ of undefined 或静默失败。

✅ 正确做法：禁用服务端排序，改用客户端排序

由于您已设置 serverSide: true，DataTable 默认将所有排序交由后端处理；但您的代码却试图在前端“模拟”排序（lastResponse.data.sort(…)），这本质上是矛盾的。若需前端排序，请关闭服务端处理：

// 修改初始化配置（关键变更） serverSide: false, // ? 关键：启用客户端排序 bSort: true,       // ? 允许排序（原为 false） stateSave: false,  // 可选：避免排序状态与服务端冲突

同时移除 beforeSend 中全部手动排序逻辑，让 DataTable 自动处理：

// ❌ 删除以下危险代码块 // beforeSend: function () { //     if (skipAjax) { //         const lastResponse = table.ajax.json();  //         lastResponse.draw  = skipAjaxDrawValue;  //         isSortAscending    = !isSortAscending; //         lastResponse.data.sort((r1, r2) => ...); //         adjustSortIcon(isSortAscending); //         this.success(lastResponse);  //         skipAjax = false;            //         return false; //     } //     ... // },

✅ 保留服务端排序？请交由后端完成

若必须使用 serverSide: true（推荐用于大数据量），则删除所有前端排序干预，仅通过 order 参数通知后端排序字段和方向：

ajax: {     url: "/BeneficiaryPayment/Search",     data: function (data) {         // DataTable 自动注入 order[0][column] 和 order[0][dir]         // 后端应据此查询并返回已排序数据         return data;     } }, // 移除手动 sort、skipAjax、adjustSortIcon 等逻辑

并在后端（如 C#、java）解析 Request.Form[“order[0][column]”] 和 order[0][dir]，动态构建 sql ORDER BY。

? 补充修复项（提升健壮性）

1. 修正 adjustSortIcon 的 dom 选择器（原代码有误）：

   function adjustSortIcon(isSortAscending) {     // ❌ 错误：$("th.sortable", 0) —— 第二个参数非索引，是上下文     // ✅ 正确：定位第一个 .sortable th     const cell = $("th.sortable").first();     cell.removeClass("sorting_asc sorting_desc")         .addClass(isSortAscending ? "sorting_asc" : "sorting_desc"); }

2. 确保 DataTable css 类正确加载：
   Firefox 对 CSS 优先级更敏感，确认引入了 dataTables.bootstrap4.css（或对应主题）且 .sorting_asc/.sorting_desc 样式未被覆盖。

3. 验证脚本版本一致性：
   使用官方 cdn 的最新稳定版（如 DataTables 1.13+），避免混用旧版 js/CSS：

✅ 总结

遵循上述任一规范路径，即可彻底解决 Firefox 下排序失效问题，同时提升代码可维护性与跨浏览器稳定性。