复杂表头 - 所有表头行

此示例演示了在 DataTable 中使用colspan和rowspan以及其对导出数据的影响。所有导出格式都允许在表头中使用列和行跨度元素。在复制和 CSV 导出的情况下，使用空字符串，因为它们是纯文本格式，并且没有colspan/rowspan的概念。

姓名	职位		联系方式
姓名	人力资源信息			直属领导
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({ layout: { topStart: { buttons: ['copyHtml5', 'excelHtml5', 'csvHtml5', 'pdfHtml5'] } } });

new DataTable('#example', { layout: { topStart: { buttons: ['copyHtml5', 'excelHtml5', 'csvHtml5', 'pdfHtml5'] } } });

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

下面显示的 HTML 是原始 HTML 表格元素，在 DataTables 增强之前

此示例使用了一些超出库文件（如下）加载的额外 CSS，以便正确显示表格。下面显示了使用的额外 CSS

以下 CSS 库文件加载到此示例中以提供表格的样式

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

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

复杂表头 - 所有表头行

其他示例

基本初始化

HTML 5 数据导出

列可见性

打印

API

拆分按钮

样式

DataTables