0

0

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

碧海醫心

碧海醫心

发布时间:2026-01-27 17:08:12

|

474人浏览过

|

来源于php中文网

原创

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 参数通知后端排序字段和方向:

千博购物系统.Net
千博购物系统.Net

千博购物系统.Net能够适合不同类型商品,为您提供了一个完整的在线开店解决方案。千博购物系统.Net除了拥有一般网上商店系统所具有的所有功能,还拥有着其它网店系统没有的许多超强功能。千博购物系统.Net适合中小企业和个人快速构建个性化的网上商店。强劲、安全、稳定、易用、免费是它的主要特性。系统由C#及Access/MS SQL开发,是B/S(浏览器/服务器)结构Asp.Net程序。多种独创的技术使

下载
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:

    
    

✅ 总结

场景 推荐方案 关键操作
数据量小( 客户端排序 serverSide: false + 移除手动 sort 逻辑
数据量大 服务端排序 serverSide: true + 后端解析 order[] 参数,前端不干预排序流程
绝对禁止 混合模式(前端 mock 排序 + serverSide: true) 会导致状态不一致,Firefox 首当其冲

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

热门AI工具

更多
DeepSeek
DeepSeek

幻方量化公司旗下的开源大模型平台

豆包大模型
豆包大模型

字节跳动自主研发的一系列大型语言模型

通义千问
通义千问

阿里巴巴推出的全能AI助手

腾讯元宝
腾讯元宝

腾讯混元平台推出的AI助手

文心一言
文心一言

文心一言是百度开发的AI聊天机器人,通过对话可以生成各种形式的内容。

讯飞写作
讯飞写作

基于讯飞星火大模型的AI写作工具,可以快速生成新闻稿件、品宣文案、工作总结、心得体会等各种文文稿

即梦AI
即梦AI

一站式AI创作平台,免费AI图片和视频生成。

ChatGPT
ChatGPT

最最强大的AI聊天机器人程序,ChatGPT不单是聊天机器人,还能进行撰写邮件、视频脚本、文案、翻译、代码等任务。

相关专题

更多
数据分析工具有哪些
数据分析工具有哪些

数据分析工具有Excel、SQL、Python、R、Tableau、Power BI、SAS、SPSS和MATLAB等。详细介绍:1、Excel,具有强大的计算和数据处理功能;2、SQL,可以进行数据查询、过滤、排序、聚合等操作;3、Python,拥有丰富的数据分析库;4、R,拥有丰富的统计分析库和图形库;5、Tableau,提供了直观易用的用户界面等等。

706

2023.10.12

SQL中distinct的用法
SQL中distinct的用法

SQL中distinct的语法是“SELECT DISTINCT column1, column2,...,FROM table_name;”。本专题为大家提供相关的文章、下载、课程内容,供大家免费下载体验。

327

2023.10.27

SQL中months_between使用方法
SQL中months_between使用方法

在SQL中,MONTHS_BETWEEN 是一个常见的函数,用于计算两个日期之间的月份差。想了解更多SQL的相关内容,可以阅读本专题下面的文章。

349

2024.02.23

SQL出现5120错误解决方法
SQL出现5120错误解决方法

SQL Server错误5120是由于没有足够的权限来访问或操作指定的数据库或文件引起的。想了解更多sql错误的相关内容,可以阅读本专题下面的文章。

1201

2024.03.06

sql procedure语法错误解决方法
sql procedure语法错误解决方法

sql procedure语法错误解决办法:1、仔细检查错误消息;2、检查语法规则;3、检查括号和引号;4、检查变量和参数;5、检查关键字和函数;6、逐步调试;7、参考文档和示例。想了解更多语法错误的相关内容,可以阅读本专题下面的文章。

360

2024.03.06

oracle数据库运行sql方法
oracle数据库运行sql方法

运行sql步骤包括:打开sql plus工具并连接到数据库。在提示符下输入sql语句。按enter键运行该语句。查看结果,错误消息或退出sql plus。想了解更多oracle数据库的相关内容,可以阅读本专题下面的文章。

798

2024.04.07

sql中where的含义
sql中where的含义

sql中where子句用于从表中过滤数据,它基于指定条件选择特定的行。想了解更多where的相关内容,可以阅读本专题下面的文章。

581

2024.04.29

sql中删除表的语句是什么
sql中删除表的语句是什么

sql中用于删除表的语句是drop table。语法为drop table table_name;该语句将永久删除指定表的表和数据。想了解更多sql的相关内容,可以阅读本专题下面的文章。

422

2024.04.29

Python 自然语言处理(NLP)基础与实战
Python 自然语言处理(NLP)基础与实战

本专题系统讲解 Python 在自然语言处理(NLP)领域的基础方法与实战应用,涵盖文本预处理(分词、去停用词)、词性标注、命名实体识别、关键词提取、情感分析,以及常用 NLP 库(NLTK、spaCy)的核心用法。通过真实文本案例,帮助学习者掌握 使用 Python 进行文本分析与语言数据处理的完整流程,适用于内容分析、舆情监测与智能文本应用场景。

9

2026.01.27

热门下载

更多
网站特效
/
网站源码
/
网站素材
/
前端模板

精品课程

更多
相关推荐
/
热门推荐
/
最新课程
Sass 教程
Sass 教程

共14课时 | 0.8万人学习

Bootstrap 5教程
Bootstrap 5教程

共46课时 | 3万人学习

CSS教程
CSS教程

共754课时 | 24.2万人学习

关于我们 免责申明 举报中心 意见反馈 讲师合作 广告合作 最新更新
php中文网:公益在线php培训,帮助PHP学习者快速成长!
关注服务号 技术交流群
PHP中文网订阅号
每天精选资源文章推送

Copyright 2014-2026 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号