DataTables示例 多列排序

DataTables允许同时按多列排序,可以按多个顺序激活 of different ways:

  • 用户平移列的点击(以第二,第三等顺序添加了单击的列 column).
  • 基于每个列(即,按特定列排序,如果集结号游戏 在第一列中是相同的),通过 columns.orderDataDT 选项。
  • 使用 columns.orderDataDT 选择 specify a multiple column order by default (for example [ [0,'asc'], [1,'asc'] ]).
  • 通过 order()DT API方法。

请注意,可以通过以下方式禁用用户将点击转换为多列顺序的功能 the orderMultiDT 选项。

下例显示了第一列,其中第二列应用于第二列 表,反之亦然,第二列直接与第一列相关,而薪金列与 名字列。

名字 位置 办公室 薪水
尼克松 系统架构师 爱丁堡 $ 320,800
加勒特 温特斯 会计 东京 $ 170,750
阿什顿 考克斯 初级技术作者 旧金山 $ 86,000
塞德里克 凯莉 高级JavaScript开发人员 爱丁堡 $ 433,060
艾里 佐头 会计 东京 $ 162,700
布里埃尔 威廉森 整合专家 纽约 $ 372,000
赫罗德 钱德勒 销售助理 旧金山 $ 137,500
罗纳 戴维森 整合专家 东京 $ 327,900
科琳 赫斯特 JavaScript开发人员 旧金山 $ 205,500
索尼娅 软件工程师 爱丁堡 $ 103,600
耶拿 盖恩斯 办公室主管 伦敦 $ 90,560
奎因 弗林 支持主管 爱丁堡 $ 342,000
查德 马歇尔 区域总监 旧金山 $ 470,600
海利 肯尼迪 高级营销设计师 伦敦 $ 313,500
塔季扬娜 菲茨帕特里克 区域总监 伦敦 $ 385,750
麦可 席尔瓦 营销设计师 伦敦 $ 198,500
保罗 伯德 首席财务官(CFO) 纽约 $ 725,000
格洛丽亚 系统管理员 纽约 $ 237,500
布拉德利 格里尔 软件工程师 伦敦 $ 132,000
里奥斯 人事主管 爱丁堡 $ 217,500
珍妮特 考德威尔 开发主管 纽约 $ 345,000
尤里 浆果 首席营销官(CMO) 纽约 $ 675,000
es撒 万斯 售前支持 纽约 $ 106,450
多丽丝 怀尔德 销售助理 西德尼 $ 85,600
当归 拉莫斯 首席执行官(CEO) 伦敦 $ 1,200,000
加文 乔伊斯 开发者 爱丁堡 $ 92,575
珍妮佛 区域总监 新加坡 $ 357,650
布伦登 瓦格纳 软件工程师 旧金山 $ 206,850
菲奥娜 绿色 首席运营官(COO) 旧金山 $ 850,000
寿 伊藤 区域行销 东京 $ 163,000
蜜雪儿 整合专家 西德尼 $ 95,400
寿喜 伯克斯 开发者 伦敦 $ 114,500
普雷斯科特 巴特利特 技术作者 伦敦 $ 145,000
加文 科尔特斯 队长 旧金山 $ 235,500
马丁娜 麦克莱 售后支持 爱丁堡 $ 324,050
统一 巴特勒 营销设计师 旧金山 $ 85,675
霍华德 哈特菲尔德 办公室主管 旧金山 $ 164,500
希望 丰特斯 秘书 旧金山 $ 109,850
维维安 哈雷尔 财务总监 旧金山 $ 452,500
提摩太 穆尼 办公室主管 伦敦 $ 136,200
杰克逊 布拉德肖 导向器 纽约 $ 645,750
奥利维亚 支援工程师 新加坡 $ 234,500
布鲁诺 纳什 软件工程师 伦敦 $ 163,500
山本 支援工程师 东京 $ 139,575
雷神 沃尔顿 开发者 纽约 $ 98,540
芬恩 卡马乔 支援工程师 旧金山 $ 87,500
哔叽 鲍德温 集结号游戏协调员 新加坡 $ 138,575
泽奈达 坦率 软件工程师 纽约 $ 125,250
佐丽塔 塞拉诺 软件工程师 旧金山 $ 115,000
珍妮佛 阿科斯塔 初级Java语言开发人员 爱丁堡 $ 75,650
卡拉 史蒂文斯 销售助理 纽约 $ 145,600
赫敏 巴特勒 区域总监 伦敦 $ 356,250
莱尔 格里尔 系统管理员 伦敦 $ 103,500
乔纳斯 亚力山大 开发者 旧金山 $ 86,500
d 百得 区域总监 爱丁堡 $ 183,000
麦可 布鲁斯 JavaScript开发人员 新加坡 $ 183,000
唐娜 斯奈德 客户支持 纽约 $ 112,000

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

$(document).ready(function() { $('#example').dataTable( { columnDefs: [ { targets: [ 0 ], orderData: [ 0, 1 ] }, { targets: [ 1 ], orderData: [ 1, 0 ] }, { targets: [ 4 ], orderData: [ 4, 0 ] } ] } ); } );

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

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

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

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

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

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