DataTables示例 订购插件(带有类型检测)

尽管DataTables将使用以下命令自动从多种不同的数据类型中对数据进行排序 内置方法,当处理更复杂的格式化数据时,可能需要定义 自己点菜。使用插件排序功能,您可以让DataTables在任何位置对数据进行排序 manner you wish.

可以自动检测特定种类的格式化数据,并提供合适的订购插件 通过使用DataTables的插件类型检测功能分配给它。有关完整信息 关于类型检测和订购插件;创建它们及其要求,请参阅 插件开发文档。

本示例显示了使用枚举类型的排序。

可以在以下位置找到各种现成的订购插件: DataTables插件页面.

名称 位置 办公室 年龄 开始日期 薪水
名称 位置 办公室 年龄 开始日期 薪水
老虎·尼克松 系统架构师 爱丁堡 61 2011/04/25
加勒特·温特斯 会计 东京 63 2011/07/25
阿什顿·考克斯(Ashton Cox) 初级技术作者 旧金山 66 2009/01/12
塞德里克·凯利 高级JavaScript开发人员 爱丁堡 22 2012/03/29
沙里爱里 会计 东京 33 2008/11/28
布里埃尔·威廉姆森(Brielle Williamson) 整合专家 纽约 61 2012/12/02
赫罗德·钱德勒 销售助理 旧金山 59 2012/08/06
罗娜·戴维森 整合专家 东京 55 2010/10/14
科琳·赫斯特(Colleen Hurst) JavaScript开发人员 旧金山 39 2009/09/15
索尼娅·弗罗斯特 软件工程师 爱丁堡 23 2008/12/13
耶拿·盖恩斯(Jena Gaines) 办公室主管 伦敦 30 2008/12/19
奎因·弗林(Quinn Flynn) 支持主管 爱丁堡 22 2013/03/03
查德·马歇尔 区域总监 旧金山 36 2008/10/16
海莉·肯尼迪(Haley Kennedy) 高级营销设计师 伦敦 43 2012/12/18
塔蒂亚娜·菲茨帕特里克(Tatyana Fitzpatrick) 区域总监 伦敦 19 2010/03/17
迈克尔·席尔瓦 营销设计师 伦敦 66 2012/11/27
保罗·伯德 首席财务官(CFO) 纽约 64 2010/06/09
Gloria Little 系统管理员 纽约 59 2009/04/10
布拉德利·格里尔 软件工程师 伦敦 41 2012/10/13
戴里奥斯 人事主管 爱丁堡 35 2012/09/26
珍妮特·考德威尔 开发主管 纽约 30 2011/09/03
尤里·贝里 首席营销官(CMO) 纽约 40 2009/06/25
凯撒万斯 售前支持 纽约 21 2011/12/12
多丽丝·怀尔德(Doris Wilder) 销售助理 西德尼 23 2010/09/20
当归拉莫斯(Angelica Ramos) 首席执行官(CEO) 伦敦 47 2009/10/09
加文·乔伊斯(Gavin Joyce) 开发者 爱丁堡 42 2010/12/22
张珍妮 区域总监 新加坡 28 2010/11/14
布伦登·瓦格纳 软件工程师 旧金山 28 2011/06/07
菲奥娜·格林(Fiona Green) 首席运营官(COO) 旧金山 48 2010/03/11
寿头 区域行销 东京 20 2011/08/14
米歇尔之家 整合专家 西德尼 37 2011/06/02
苏基·伯克斯(Suki Burks) 开发者 伦敦 53 2009/10/22
普雷斯科特·巴特利特 技术作者 伦敦 27 2011/05/07
加文·科尔特斯(Gavin Cortez) 队长 旧金山 22 2008/10/26
马丁娜·麦克雷 售后支持 爱丁堡 46 2011/03/09
团结管家 营销设计师 旧金山 47 2009/12/09
霍华德·哈特菲尔德 办公室主管 旧金山 51 2008/12/16
希望富恩特斯 秘书 旧金山 41 2010/02/12
薇薇安·哈瑞尔(Vivian Harrell) 财务总监 旧金山 62 2009/02/14
蒂莫西·穆尼(Timothy Mooney) 办公室主管 伦敦 37 2008/12/11
杰克逊·布拉德肖 导向器 纽约 65 2008/09/26
梁静茹 支援工程师 新加坡 64 2011/02/03
布鲁诺·纳什(Bruno Nash) 软件工程师 伦敦 38 2011/05/03
山本樱 支援工程师 东京 37 2009/08/19
雷神沃尔顿 开发者 纽约 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) 初级Java语言开发人员 爱丁堡 43 2013/02/01
卡拉·史蒂文斯(Cara Stevens) 销售助理 纽约 46 2011/12/06
赫敏·巴特勒 区域总监 伦敦 47 2011/03/21
莱尔·格里尔 系统管理员 伦敦 21 2009/02/27
乔纳斯·亚历山大(Jonas Alexander) 开发者 旧金山 30 2010/07/14
Shad Decker 区域总监 爱丁堡 51 2008/11/13
迈克尔·布鲁斯 JavaScript开发人员 新加坡 29 2011/06/27
唐娜·斯尼德 客户支持 纽约 27 2011/01/25

下面显示的Javascript用于初始化此显示的表 example:

$.fn.dataTable.ext.type.detect.unshift( function ( d ) { return d === 'Low' || d === 'Medium' || d === 'High' ? 'salary-grade' : null; } ); $.fn.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; }; $(document).ready(function() { $('#example').dataTable(); } );

除上述代码外,以下Javascript库文件也已加载以供在本文档中使用。 example:

下面显示的HTML是原始HTML表格元素,之前已通过 DataTables:

除了从库中加载的内容外,此示例还使用了一些其他CSS 文件(如下),以便正确显示表格。显示了使用的其他CSS below:

加载以下CSS库文件以供本示例使用,以提供 table:

该表通过Ajax加载数据。下面显示了已加载的最新数据。这个数据 将在加载任何其他数据时自动更新。

下面显示了用于执行此表的服务器端处理的脚本。请注意 这只是使用PHP的示例脚本。服务器端处理脚本可以用任何形式编写 language, using 协议中描述的协议 DataTables文档.