带列可见性的复杂表头

复杂表头(使用colspan / rowspan)可用于对 DataTables 中相似信息列进行分组,从而创建非常强大的视觉效果。

除了基本行为之外,DataTables 在处理隐藏列时还可以考虑colspanrowspan。每个单元格的colspanrowspan 属性会自动计算并在页面上为您呈现。这使得columns.visible 选项和column().visible() 方法能够考虑rowspan / colspan 单元格,并正确绘制表头。

请注意,每列必须至少包含一个唯一的单元格(即没有colspan 的单元格),以便 DataTables 可以使用该单元格检测列并将其用于应用排序。

下面的示例显示了一个跨越联系信息多个单元格的表头,其中跨越的列之一被隐藏。

姓名 职位 联系方式
人力资源信息 直线经理
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({ columnDefs: [ { targets: -1, visible: false } ] });
new DataTable('#example', { columnDefs: [ { targets: -1, visible: false } ] });

除了上述代码外,以下 Javascript 库文件也加载到本示例中以供使用

    下面显示的 HTML 是原始 HTML 表格元素,在 DataTables 对其进行增强之前

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

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

      此表格通过 Ajax 加载数据。已加载的最新数据显示如下。当加载任何其他数据时,此数据将自动更新。

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

      其他示例