复杂表头 (rowspan 和 colspan)

在使用表格显示数据时,您通常希望将列信息分组显示。DataTables 完全支持表格表头中的colspanrowspan,并为元素覆盖的列分配适当的排序监听器,以适用于 th 单元格。

从 DataTables 2 开始,列不再需要它们自己的唯一表头单元格(如 DataTables 1.x 中的情况) - 多个列可以共享单个colspan 元素,如以下示例所示。只有“姓名”列具有唯一的单元格。此外,当在colspan 单元格上激活排序时,它将自动为适用的列启用多列排序。

DataTables 将自动将排序监听器和图标应用于表格表头中的所有单元格。如果您希望禁用此功能,可以在表格表头中的 th/td 单元格上使用data-dt-order 属性。此属性的值(如果存在,则完全可选)控制排序监听器和图标

  • data-dt-order="disable" - 排序监听器不会附加到这些单元格,也不会显示排序状态图标。
  • data-dt-order="icon-only" - 排序监听器不会附加到这些单元格,但排序状态图标显示。

如果未定义,则单元格将具有附加的排序监听器并显示状态图标(除非通过 columns.orderable 选项禁用)。有关更多详细信息,请参阅 columns.orderable 选项。

在以下示例中,HR 信息已应用了data-dt-order="disable"。表头中的其他单元格都是可点击的,并且显示了排序状态图标。

姓名 职位 联系方式
HR 信息 直接主管
Tiger Nixon 系统架构师 $320,800 爱丁堡 5421 [email protected]
Garrett Winters 会计 $170,750 东京 8422 [email protected]
Ashton Cox 初级技术作家 $86,000 旧金山 1562 [email protected]
Cedric Kelly 高级 Javascript 开发人员 $433,060 爱丁堡 6224 [email protected]
Airi Satou 会计 $162,700 东京 5407 [email protected]
Brielle Williamson 集成专家 $372,000 纽约 4804 [email protected]
Herrod Chandler 销售助理 $137,500 旧金山 9608 [email protected]
Rhona Davidson 集成专家 $327,900 东京 6200 [email protected]
Colleen Hurst Javascript 开发人员 $205,500 旧金山 2360 [email protected]
Sonya Frost 软件工程师 $103,600 爱丁堡 1667 [email protected]
Jena Gaines 办公室经理 $90,560 伦敦 3814 [email protected]
Quinn Flynn 支持主管 $342,000 爱丁堡 9497 [email protected]
Charde Marshall 区域总监 $470,600 旧金山 6741 [email protected]
Haley Kennedy 高级市场设计师 $313,500 伦敦 3597 [email protected]
Tatyana Fitzpatrick 区域总监 $385,750 伦敦 1965 [email protected]
Michael Silva 市场设计师 $198,500 伦敦 1581 [email protected]
Paul Byrd 首席财务官 (CFO) $725,000 纽约 3059 [email protected]
Gloria Little 系统管理员 $237,500 纽约 1721 [email protected]
Bradley Greer 软件工程师 $132,000 伦敦 2558 [email protected]
Dai Rios 人力资源主管 $217,500 爱丁堡 2290 [email protected]
Jenette Caldwell 开发主管 $345,000 纽约 1937 [email protected]
Yuri Berry 首席营销官 (CMO) $675,000 纽约 6154 [email protected]
Caesar Vance 售前支持 $106,450 纽约 8330 [email protected]
Doris Wilder 销售助理 $85,600 悉尼 3023 [email protected]
Angelica Ramos 首席执行官 (CEO) $1,200,000 伦敦 5797 [email protected]
Gavin Joyce 开发人员 $92,575 爱丁堡 8822 [email protected]
Jennifer Chang 区域总监 $357,650 新加坡 9239 [email protected]
Brenden Wagner 软件工程师 $206,850 旧金山 1314 [email protected]
Fiona Green 首席运营官 (COO) $850,000 旧金山 2947 [email protected]
Shou Itou 区域营销 $163,000 东京 8899 [email protected]
Michelle House 集成专家 $95,400 悉尼 2769 [email protected]
Suki Burks 开发人员 $114,500 伦敦 6832 [email protected]
Prescott Bartlett 技术作家 $145,000 伦敦 3606 [email protected]
Gavin Cortez 团队主管 $235,500 旧金山 2860 [email protected]
Martena Mccray 售后支持 $324,050 爱丁堡 8240 [email protected]
Unity Butler 市场设计师 $85,675 旧金山 5384 [email protected]
Howard Hatfield 办公室经理 $164,500 旧金山 7031 [email protected]
Hope Fuentes 秘书 $109,850 旧金山 6318 [email protected]
Vivian Harrell 财务总监 $452,500 旧金山 9422 [email protected]
Timothy Mooney 办公室经理 $136,200 伦敦 7580 [email protected]
Jackson Bradshaw 主管 $645,750 纽约 1042 [email protected]
Olivia Liang 支持工程师 $234,500 新加坡 2120 [email protected]
Bruno Nash 软件工程师 $163,500 伦敦 6222 [email protected]
Sakura Yamamoto 支持工程师 $139,575 东京 9383 [email protected]
Thor Walton 开发人员 $98,540 纽约 8327 [email protected]
Finn Camacho 支持工程师 $87,500 旧金山 2927 [email protected]
Serge Baldwin 数据协调员 $138,575 新加坡 8352 [email protected]
Zenaida Frank 软件工程师 $125,250 纽约 7439 [email protected]
Zorita Serrano 软件工程师 $115,000 旧金山 4389 [email protected]
Jennifer Acosta 初级 Javascript 开发人员 $75,650 爱丁堡 3431 [email protected]
Cara Stevens 销售助理 $145,600 纽约 3990 [email protected]
Hermione Butler 区域总监 $356,250 伦敦 1016 [email protected]
Lael Greer 系统管理员 $103,500 伦敦 6733 [email protected]
Jonas Alexander 开发人员 $86,500 旧金山 8196 [email protected]
Shad Decker 区域总监 $183,000 爱丁堡 6373 [email protected]
Michael Bruce Javascript 开发人员 $183,000 新加坡 5384 [email protected]
Donna Snider 客户支持 $112,000 纽约 4226 [email protected]
姓名 职位 薪资 办公室 分机号 电子邮件
  • Javascript
  • HTML
  • CSS
  • Ajax
  • 服务器端脚本
  • 注释

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

$('#example').DataTable();
new DataTable('#example');

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

    以下显示的 HTML 是原始的 HTML 表格元素,在 DataTables 增强之前。

    此示例使用了一些额外的 CSS(超出从库文件(如下)加载的 CSS),以正确显示表格。以下显示了使用的额外 CSS

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

      此表格通过 Ajax 加载数据。以下显示了已加载的最新数据。此数据将随着加载任何其他数据而自动更新。

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

      其他示例