复杂表头 (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 t.nixon@datatables.net
Garrett Winters 会计 $170,750 东京 8422 g.winters@datatables.net
Ashton Cox 初级技术作家 $86,000 旧金山 1562 a.cox@datatables.net
Cedric Kelly 高级 Javascript 开发人员 $433,060 爱丁堡 6224 c.kelly@datatables.net
Airi Satou 会计 $162,700 东京 5407 a.satou@datatables.net
Brielle Williamson 集成专家 $372,000 纽约 4804 b.williamson@datatables.net
Herrod Chandler 销售助理 $137,500 旧金山 9608 h.chandler@datatables.net
Rhona Davidson 集成专家 $327,900 东京 6200 r.davidson@datatables.net
Colleen Hurst Javascript 开发人员 $205,500 旧金山 2360 c.hurst@datatables.net
Sonya Frost 软件工程师 $103,600 爱丁堡 1667 s.frost@datatables.net
Jena Gaines 办公室经理 $90,560 伦敦 3814 j.gaines@datatables.net
Quinn Flynn 支持主管 $342,000 爱丁堡 9497 q.flynn@datatables.net
Charde Marshall 区域总监 $470,600 旧金山 6741 c.marshall@datatables.net
Haley Kennedy 高级市场设计师 $313,500 伦敦 3597 h.kennedy@datatables.net
Tatyana Fitzpatrick 区域总监 $385,750 伦敦 1965 t.fitzpatrick@datatables.net
Michael Silva 市场设计师 $198,500 伦敦 1581 m.silva@datatables.net
Paul Byrd 首席财务官 (CFO) $725,000 纽约 3059 p.byrd@datatables.net
Gloria Little 系统管理员 $237,500 纽约 1721 g.little@datatables.net
Bradley Greer 软件工程师 $132,000 伦敦 2558 b.greer@datatables.net
Dai Rios 人力资源主管 $217,500 爱丁堡 2290 d.rios@datatables.net
Jenette Caldwell 开发主管 $345,000 纽约 1937 j.caldwell@datatables.net
Yuri Berry 首席营销官 (CMO) $675,000 纽约 6154 y.berry@datatables.net
Caesar Vance 售前支持 $106,450 纽约 8330 c.vance@datatables.net
Doris Wilder 销售助理 $85,600 悉尼 3023 d.wilder@datatables.net
Angelica Ramos 首席执行官 (CEO) $1,200,000 伦敦 5797 a.ramos@datatables.net
Gavin Joyce 开发人员 $92,575 爱丁堡 8822 g.joyce@datatables.net
Jennifer Chang 区域总监 $357,650 新加坡 9239 j.chang@datatables.net
Brenden Wagner 软件工程师 $206,850 旧金山 1314 b.wagner@datatables.net
Fiona Green 首席运营官 (COO) $850,000 旧金山 2947 f.green@datatables.net
Shou Itou 区域营销 $163,000 东京 8899 s.itou@datatables.net
Michelle House 集成专家 $95,400 悉尼 2769 m.house@datatables.net
Suki Burks 开发人员 $114,500 伦敦 6832 s.burks@datatables.net
Prescott Bartlett 技术作家 $145,000 伦敦 3606 p.bartlett@datatables.net
Gavin Cortez 团队主管 $235,500 旧金山 2860 g.cortez@datatables.net
Martena Mccray 售后支持 $324,050 爱丁堡 8240 m.mccray@datatables.net
Unity Butler 市场设计师 $85,675 旧金山 5384 u.butler@datatables.net
Howard Hatfield 办公室经理 $164,500 旧金山 7031 h.hatfield@datatables.net
Hope Fuentes 秘书 $109,850 旧金山 6318 h.fuentes@datatables.net
Vivian Harrell 财务总监 $452,500 旧金山 9422 v.harrell@datatables.net
Timothy Mooney 办公室经理 $136,200 伦敦 7580 t.mooney@datatables.net
Jackson Bradshaw 主管 $645,750 纽约 1042 j.bradshaw@datatables.net
Olivia Liang 支持工程师 $234,500 新加坡 2120 o.liang@datatables.net
Bruno Nash 软件工程师 $163,500 伦敦 6222 b.nash@datatables.net
Sakura Yamamoto 支持工程师 $139,575 东京 9383 s.yamamoto@datatables.net
Thor Walton 开发人员 $98,540 纽约 8327 t.walton@datatables.net
Finn Camacho 支持工程师 $87,500 旧金山 2927 f.camacho@datatables.net
Serge Baldwin 数据协调员 $138,575 新加坡 8352 s.baldwin@datatables.net
Zenaida Frank 软件工程师 $125,250 纽约 7439 z.frank@datatables.net
Zorita Serrano 软件工程师 $115,000 旧金山 4389 z.serrano@datatables.net
Jennifer Acosta 初级 Javascript 开发人员 $75,650 爱丁堡 3431 j.acosta@datatables.net
Cara Stevens 销售助理 $145,600 纽约 3990 c.stevens@datatables.net
Hermione Butler 区域总监 $356,250 伦敦 1016 h.butler@datatables.net
Lael Greer 系统管理员 $103,500 伦敦 6733 l.greer@datatables.net
Jonas Alexander 开发人员 $86,500 旧金山 8196 j.alexander@datatables.net
Shad Decker 区域总监 $183,000 爱丁堡 6373 s.decker@datatables.net
Michael Bruce Javascript 开发人员 $183,000 新加坡 5384 m.bruce@datatables.net
Donna Snider 客户支持 $112,000 纽约 4226 d.snider@datatables.net
姓名 职位 薪资 办公室 分机号 电子邮件
  • Javascript
  • HTML
  • CSS
  • Ajax
  • 服务器端脚本
  • 注释

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

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

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

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

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

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

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

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

      其他示例