排序插件(无类型检测)

虽然 DataTables 将使用内置方法对许多数据类型进行排序,但是当处理格式更复杂的数据时,可能需要自行定义排序顺序。通过使用插件排序函数,可以按照任何希望的方式让 DataTables 对数据进行排序。

这是通过将 columns.type 参数与排序插件结合使用来实现的。排序插件可以具有任何级别的复杂性(例如,自然排序可能相当复杂,但也非常强大),并且通过依附于 DataTable.ext.type.order 对象来定义。有关排序插件的更多信息,包括创建这些插件及其要求,请参阅插件开发文档。

此示例显示了使用枚举类型进行排序。

可以在 DataTables 插件页面 上找到各种现成的排序插件。

姓名 职位 办事处 年龄 开始日期 工资
Tiger Nixon 系统架构师 爱丁堡 61 2011-04-25
Garrett Winters 会计 东京 63 2011-07-25
Ashton Cox 初级技术作者 旧金山 66 2009-01-12
Cedric Kelly 高级 JavaScript 开发人员 爱丁堡 22 2012-03-29 中等
Airi Satou 会计 东京 33 2008-11-28
Brielle Williamson 集成专家 纽约 61 2012-12-02 中等
Herrod Chandler 销售助理 旧金山 59 2012-08-06
Rhona Davidson 集成专家 东京 55 2010-10-14
Colleen Hurst JavaScript 开发人员 旧金山 39 2009-09-15
Sonya Frost 软件工程师 爱丁堡 23 2008-12-13
Jena Gaines 办公室经理 伦敦 30 2008-12-19
Quinn Flynn 支持主管 爱丁堡 22 2013-03-03
Charde Marshall 区域总监 旧金山 36 2008-10-16 中等
Haley Kennedy 高级营销设计师 伦敦 43 2012-12-18
Tatyana Fitzpatrick 区域总监 伦敦 19 2010-03-17 中等
Michael Silva 营销设计师 伦敦 66 2012-11-27
Paul Byrd 首席财务官 (CFO) 纽约 64 2010-06-09
Gloria Little 系统管理员 纽约 59 2009-04-10
Bradley Greer 软件工程师 伦敦 41 2012-10-13
Dai Rios 人事主管 爱丁堡 35 2012-09-26
Jenette Caldwell 开发主管 纽约 30 2011-09-03
Yuri Berry 首席营销官 (CMO) 纽约 40 2009-06-25
Caesar Vance 售前支持 纽约 21 2011-12-12
Doris Wilder 销售助理 悉尼 23 2010-09-20
Angelica Ramos 首席执行官 (CEO) 伦敦 47 2009-10-09
Gavin Joyce 开发人员 爱丁堡 42 2010-12-22
Jennifer Chang 区域总监 新加坡 28 2010-11-14 中等
Brenden Wagner 软件工程师 旧金山 28 2011-06-07
Fiona Green 首席运营官 (COO) 旧金山 48 2010-03-11
Shou Itou 区域营销 东京 20 2011-08-14
Michelle House 集成专家 悉尼 37 2011-06-02
Suki Burks 开发人员 伦敦 53 2009-10-22
Prescott Bartlett 技术作者 伦敦 27 2011-05-07
Gavin Cortez 团队负责人 旧金山 22 2008-10-26
Martena Mccray 售后支持 爱丁堡 46 2011-03-09
Unity Butler 营销设计师 旧金山 47 2009-12-09
Howard Hatfield 办公室经理 旧金山 51 2008-12-16
Hope Fuentes 秘书 旧金山 41 2010-02-12
Vivian Harrell 财务总监 旧金山 62 2009-02-14 中等
Timothy Mooney 办公室经理 伦敦 37 2008-12-11
Jackson Bradshaw 总监 纽约 65 2008-09-26 中等
Olivia Liang 支持工程师 新加坡 64 2011-02-03
Bruno Nash 软件工程师 伦敦 38 2011-05-03
Sakura Yamamoto 支持工程师 东京 37 2009-08-19
Thor Walton 开发人员 纽约 61 2013-08-11
Finn Camacho 支持工程师 旧金山 47 2009-07-07
Serge Baldwin 数据协调员 新加坡 64 2012-04-09
Zenaida Frank 软件工程师 纽约 63 2010-01-04
Zorita Serrano 软件工程师 旧金山 56 2012-06-01
Jennifer Acosta 初级 JavaScript 开发人员 爱丁堡 43 2013-02-01
Cara Stevens 销售助理 纽约 46 2011-12-06
Hermione Butler 区域总监 伦敦 47 2011-03-21 中等
Lael Greer 系统管理员 伦敦 21 2009-02-27
乔纳斯·亚历山大 开发人员 旧金山 30 2010-07-14
谢德·德克尔 区域总监 爱丁堡 51 2008-11-13
迈克尔·布鲁斯 JavaScript 开发人员 新加坡 29 2011-06-27
唐娜·斯奈德 客户支持 纽约 27 2011-01-25
姓名 职位 办事处 年龄 开始日期 工资
  • Javascript
  • HTML
  • CSS
  • Ajax
  • 服务端脚本
  • 注释

下面显示的 Javascript 用于初始化此示例中所示的表格

DataTable.ext.type.order['salary-grade-pre'] = function (d) { switch (d) { case 'Low': return 1; case 'Medium': return 2; case 'High': return 3; } return 0; }; $('#example').DataTable({ columnDefs: [ { type: 'salary-grade', targets: -1 } ] });
DataTable.ext.type.order['salary-grade-pre'] = function (d) { switch (d) { case 'Low': return 1; case 'Medium': return 2; case 'High': return 3; } return 0; }; new DataTable('#example', { columnDefs: [ { type: 'salary-grade', targets: -1 } ] });

除了以上代码外,还加载了以下 Javascript 库文件,供此示例使用

    下面所示的 HTML 是原始 HTML 表格元素,尚未通过 DataTables 增强

    此示例使用了一些额外的 CSS,位于从库文件加载的 CSS(如下所示)之外,以便正确显示表格。下面显示的是使用的附加 CSS

    以下 CSS 库文件已加载供此示例使用,以提供表格样式

      此表格通过 Ajax 加载数据。下面显示了已加载的最新数据。该数据将随着加载的任何附加数据自动更新。

      用于执行此表格的服务器端处理的脚本如下所示。请注意,这只是一个使用 PHP 的示例脚本。服务器端处理脚本可以使用任何语言编写,方法是使用DataTables 文档中描述的协议

      其他示例