DataTables示例 复杂的标头(rowspan和colspan)

当使用表显示数据时,您通常希望以组的形式显示列信息。 DataTables fully supports colspanrowspan in the table's header, 将所需的顺序侦听器分配给适合该列的TH元素。

每列必须有一个唯一的TH单元格,才能添加侦听器。默认 DataTables将使用该列的底部唯一单元格来附加订单侦听器(如果大于 如果找到一个列的一个单元格。的 orderCellsTopDT 选项可以用来告诉 如果需要,可使用顶部的单元格的DataTables。

下面显示的示例有两组分组信息,在标题中按colspan分组。

名称 人力资源信息 联系
位置 薪水 办公室 扩展 电子邮件
名称 位置 薪水 办公室 扩展 电子邮件
老虎·尼克松 系统架构师 $ 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 [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(); } );

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

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

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

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

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

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