DataTables示例 复杂标头(rowspan / colspan)

复杂的标头(使用colspan / rowspan)可用于将类似信息的列分组 DataTables,创建了非常强大的视觉效果。

除了基本行为外,DataTables还可以在以下情况下考虑colspan和rowpans: 使用隐藏的列。每个单元格的colspan和rowpan属性是自动的 为您计算并呈现在页面上。这允许 columns.visibleDT 选项和 column().visible()DT 要考虑的方法 rowpan / colspan单元格,正确绘制标题。

请注意,每一列必须至少有一个唯一的单元格(即一个没有colspan的单元格),因此DataTables 可以使用该单元格检测列并使用它来应用排序。

下面的示例显示了一个标头,该标头跨越联系信息上的多个单元格,其中一个 范围覆盖的列被隐藏。

名称 人力资源信息 联系
位置 薪水 办公室 扩展 电子邮件
名称 位置 薪水 办公室 扩展 电子邮件
老虎·尼克松 系统架构师 $ 320,800 爱丁堡 5421 [email protected]
加勒特·温特斯 会计 $ 170,750 东京 8422 [email protected]
阿什顿·考克斯(Ashton Cox) 初级技术作者 $ 86,000 旧金山 1562 [email protected]
塞德里克·凯利 高级JavaScript开发人员 $ 433,060 爱丁堡 6224 [email protected]
沙里爱里 会计 $ 162,700 东京 5407 [email protected]
布里埃尔·威廉姆森(Brielle Williamson) 整合专家 $ 372,000 纽约 4804 [email protected]
赫罗德·钱德勒 销售助理 $ 137,500 旧金山 9608 [email protected]
罗娜·戴维森 整合专家 $ 327,900 东京 6200 [email protected]
科琳·赫斯特(Colleen Hurst) JavaScript开发人员 $ 205,500 旧金山 2360 [email protected]
索尼娅·弗罗斯特 软件工程师 $ 103,600 爱丁堡 1667 [email protected]
耶拿·盖恩斯(Jena Gaines) 办公室主管 $ 90,560 伦敦 3814 [email protected]
奎因·弗林(Quinn Flynn) 支持主管 $ 342,000 爱丁堡 9497 [email protected]
查德·马歇尔 区域总监 $ 470,600 旧金山 6741 [email protected]
海莉·肯尼迪(Haley Kennedy) 高级营销设计师 $ 313,500 伦敦 3597 [email protected]
塔蒂亚娜·菲茨帕特里克(Tatyana Fitzpatrick) 区域总监 $ 385,750 伦敦 1965 [email protected]
迈克尔·席尔瓦 营销设计师 $ 198,500 伦敦 1581 [email protected]
保罗·伯德 首席财务官(CFO) $ 725,000 纽约 3059 [email protected]
Gloria Little 系统管理员 $ 237,500 纽约 1721 [email protected]
布拉德利·格里尔 软件工程师 $ 132,000 伦敦 2558 [email protected]
戴里奥斯 人事主管 $ 217,500 爱丁堡 2290 [email protected]
珍妮特·考德威尔 开发主管 $ 345,000 纽约 1937 [email protected]
尤里·贝里 首席营销官(CMO) $ 675,000 纽约 6154 [email protected]
凯撒万斯 售前支持 $ 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]
张珍妮 区域总监 $ 357,650 新加坡 9239 [email protected]
布伦登·瓦格纳 软件工程师 $ 206,850 旧金山 1314 [email protected]
菲奥娜·格林(Fiona Green) 首席运营官(COO) $ 850,000 旧金山 2947 [email protected]
寿头 区域行销 $ 163,000 东京 8899 [email protected]
米歇尔之家 整合专家 $ 95,400 西德尼 2769 [email protected]
苏基·伯克斯(Suki Burks) 开发者 $ 114,500 伦敦 6832 [email protected]
普雷斯科特·巴特利特 技术作者 $ 145,000 伦敦 3606 [email protected]
加文·科尔特斯(Gavin Cortez) 队长 $ 235,500 旧金山 2860 [email protected]
马丁娜·麦克雷 售后支持 $ 324,050 爱丁堡 8240 [email protected]
团结管家 营销设计师 $ 85,675 旧金山 5384 [email protected]
霍华德·哈特菲尔德 办公室主管 $ 164,500 旧金山 7031 [email protected]
希望富恩特斯 秘书 $ 109,850 旧金山 6318 [email protected]
薇薇安·哈瑞尔(Vivian Harrell) 财务总监 $ 452,500 旧金山 9422 [email protected]
蒂莫西·穆尼(Timothy Mooney) 办公室主管 $ 136,200 伦敦 7580 [email protected]
杰克逊·布拉德肖 导向器 $ 645,750 纽约 1042 [email protected]
梁静茹 支援工程师 $ 234,500 新加坡 2120 [email protected]
布鲁诺·纳什(Bruno Nash) 软件工程师 $ 163,500 伦敦 6222 [email protected]
山本樱 支援工程师 $ 139,575 东京 9383 [email protected]
雷神沃尔顿 开发者 $ 98,540 纽约 8327 [email protected]
芬·卡马乔(Finn Camacho) 支援工程师 $ 87,500 旧金山 2927 f.camac[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) 初级Java语言开发人员 $ 75,650 爱丁堡 3431 [email protected]
卡拉·史蒂文斯(Cara Stevens) 销售助理 $ 145,600 纽约 3990 [email protected]
赫敏·巴特勒 区域总监 $ 356,250 伦敦 1016 [email protected]
莱尔·格里尔 系统管理员 $ 103,500 伦敦 6733 [email protected]
乔纳斯·亚历山大(Jonas Alexander) 开发者 $ 86,500 旧金山 8196 [email protected]
Shad Decker 区域总监 $ 183,000 爱丁堡 6373 [email protected]
迈克尔·布鲁斯 JavaScript开发人员 $ 183,000 新加坡 5384 [email protected]
唐娜·斯尼德 客户支持 $ 112,000 纽约 4226 [email protected]

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

$(document).ready(function() { $('#example').dataTable( { "columnDefs": [ { "visible": false, "targets": -1 } ] } ); } );

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

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

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

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

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

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