多列排序
DataTables 允许同时按多列排序，可以通过多种不同的方式激活此功能
- 用户按住 Shift 键并点击列（将点击的列添加为次要、第三次等排序列）。
- 在每个列的基础上（例如，按特定列排序，然后在第一列中的数据相同的情况下按第二个列排序），通过
columns.orderData选项。 - 使用
columns.orderData选项默认指定多列排序（例如[ 0, 1 ]）。 - 通过
order()API 方法。
请注意，可以通过 orderMulti 选项禁用用户按住 Shift 键进行多列排序的功能。
下面的示例显示第一列对第二列应用了辅助排序，反之亦然，第二列直接绑定到第一列，而工资列绑定到名字列。
| 名字 | 姓氏 | 职位 | 办公室 | 工资 |
|---|---|---|---|---|
| Tiger | Nixon | 系统架构师 | 爱丁堡 | 320800 |
| Garrett | Winters | 会计 | 东京 | 170750 |
| Ashton | Cox | 初级技术作家 | 旧金山 | 86000 |
| Cedric | Kelly | 高级 Javascript 开发人员 | 爱丁堡 | 433060 |
| Airi | Satou | 会计 | 东京 | 162700 |
| Brielle | Williamson | 集成专家 | 纽约 | 372000 |
| Herrod | Chandler | 销售助理 | 旧金山 | 137500 |
| Rhona | Davidson | 集成专家 | 东京 | 327900 |
| Colleen | Hurst | Javascript 开发人员 | 旧金山 | 205500 |
| Sonya | Frost | 软件工程师 | 爱丁堡 | 103600 |
| Jena | Gaines | 办公室经理 | 伦敦 | 90560 |
| Quinn | Flynn | 支持主管 | 爱丁堡 | 342000 |
| Charde | Marshall | 区域总监 | 旧金山 | 470600 |
| Haley | Kennedy | 高级营销设计师 | 伦敦 | 313500 |
| Tatyana | Fitzpatrick | 区域总监 | 伦敦 | 385750 |
| Michael | Silva | 营销设计师 | 伦敦 | 198500 |
| Paul | Byrd | 首席财务官 (CFO) | 纽约 | 725000 |
| Gloria | Little | 系统管理员 | 纽约 | 237500 |
| Bradley | Greer | 软件工程师 | 伦敦 | 132000 |
| Dai | Rios | 人事主管 | 爱丁堡 | 217500 |
| Jenette | Caldwell | 开发主管 | 纽约 | 345000 |
| Yuri | Berry | 首席营销官 (CMO) | 纽约 | 675000 |
| Caesar | Vance | 售前支持 | 纽约 | 106450 |
| Doris | Wilder | 销售助理 | Sydney | 85600 |
| Angelica | Ramos | 首席执行官 (CEO) | 伦敦 | 1200000 |
| Gavin | Joyce | 开发者 | 爱丁堡 | 92575 |
| Jennifer | Chang | 区域总监 | 新加坡 | 357650 |
| Brenden | Wagner | 软件工程师 | 旧金山 | 206850 |
| Fiona | Green | 首席运营官 (COO) | 旧金山 | 850000 |
| Shou | Itou | 区域营销 | 东京 | 163000 |
| Michelle | House | 集成专家 | Sydney | 95400 |
| Suki | Burks | 开发者 | 伦敦 | 114500 |
| Prescott | Bartlett | 技术作家 | 伦敦 | 145000 |
| Gavin | Cortez | 团队领导 | 旧金山 | 235500 |
| Martena | Mccray | 售后支持 | 爱丁堡 | 324050 |
| Unity | Butler | 营销设计师 | 旧金山 | 85675 |
| Howard | Hatfield | 办公室经理 | 旧金山 | 164500 |
| Hope | Fuentes | 秘书 | 旧金山 | 109850 |
| Vivian | Harrell | 财务总监 | 旧金山 | 452500 |
| Timothy | Mooney | 办公室经理 | 伦敦 | 136200 |
| Jackson | Bradshaw | 总监 | 纽约 | 645750 |
| Olivia | Liang | 支持工程师 | 新加坡 | 234500 |
| Bruno | Nash | 软件工程师 | 伦敦 | 163500 |
| Sakura | Yamamoto | 支持工程师 | 东京 | 139575 |
| Thor | Walton | 开发者 | 纽约 | 98540 |
| Finn | Camacho | 支持工程师 | 旧金山 | 87500 |
| Serge | Baldwin | 数据协调员 | 新加坡 | 138575 |
| Zenaida | Frank | 软件工程师 | 纽约 | 125250 |
| Zorita | Serrano | 软件工程师 | 旧金山 | 115000 |
| Jennifer | Acosta | 初级 Javascript 开发人员 | 爱丁堡 | 75650 |
| Cara | Stevens | 销售助理 | 纽约 | 145600 |
| Hermione | Butler | 区域总监 | 伦敦 | 356250 |
| Lael | Greer | 系统管理员 | 伦敦 | 103500 |
| Jonas | Alexander | 开发者 | 旧金山 | 86500 |
| Shad | Decker | 区域总监 | 爱丁堡 | 183000 |
| Michael | Bruce | Javascript 开发人员 | 新加坡 | 183000 |
| Donna | Snider | 客户支持 | 纽约 | 112000 |
- Javascript
- HTML
- CSS
- Ajax
- 服务器端脚本
- 注释
以下显示的 Javascript 用于初始化本示例中显示的表格
$('#example').DataTable({ columnDefs: [ { targets: [0], orderData: [0, 1] }, { targets: [1], orderData: [1, 0] }, { targets: [4], orderData: [4, 0] } ] });
new DataTable('#example', { columnDefs: [ { targets: [0], orderData: [0, 1] }, { targets: [1], orderData: [1, 0] }, { targets: [4], orderData: [4, 0] } ] });
除了以上代码外，以下 Javascript 库文件也加载到本示例中使用
以下显示的 HTML 是原始的 HTML 表格元素，在 DataTables 增强之前
此示例使用了一些超出库文件（如下）加载的额外 CSS，以便正确显示表格。使用的额外 CSS 如下所示
以下 CSS 库文件加载到本示例中使用，以提供表格的样式
此表格通过 Ajax 加载数据。已加载的最新数据显示如下。此数据将随着任何其他数据的加载而自动更新。
用于执行此表格服务器端处理的脚本显示如下。请注意，这只是一个使用 PHP 的示例脚本。服务器端处理脚本可以用任何语言编写，使用 DataTables 文档中描述的协议。