自定义子行渲染器

在 Responsive 中，默认情况下，折叠表格的子行会显示隐藏列数据的 ul/li 列表。 responsive.details.renderer 选项提供了创建自定义渲染器的能力。它接受三个参数：表格的 DataTables API 实例、要使用的行索引以及有关列的信息数组 - 请参阅 responsive.details.renderer 文档以了解数组中用于每列的对象结构的完整详细信息。

此示例显示传递的 columns 参数，以仅显示 Responsive 隐藏的列的信息。您可以对其进行细化，以仅选择某些列，或显示所有列等。

名字	姓氏	职位	办公室	年龄	开始日期	薪资	分机	电子邮件
Tiger	Nixon	系统架构师	爱丁堡	61	2011-04-25	$320,800	5421	[email protected]
Garrett	Winters	会计	东京	63	2011-07-25	$170,750	8422	[email protected]
Ashton	Cox	初级技术作者	旧金山	66	2009-01-12	$86,000	1562	[email protected]
Cedric	Kelly	高级 Javascript 开发人员	爱丁堡	22	2012-03-29	$433,060	6224	[email protected]
Airi	Satou	会计	东京	33	2008-11-28	$162,700	5407	[email protected]
Brielle	Williamson	集成专家	纽约	61	2012-12-02	$372,000	4804	[email protected]
Herrod	Chandler	销售助理	旧金山	59	2012-08-06	$137,500	9608	[email protected]
Rhona	Davidson	集成专家	东京	55	2010-10-14	$327,900	6200	[email protected]
Colleen	Hurst	Javascript 开发人员	旧金山	39	2009-09-15	$205,500	2360	[email protected]
Sonya	Frost	软件工程师	爱丁堡	23	2008-12-13	$103,600	1667	[email protected]
Jena	Gaines	办公室经理	伦敦	30	2008-12-19	$90,560	3814	[email protected]
Quinn	Flynn	支持主管	爱丁堡	22	2013-03-03	$342,000	9497	[email protected]
Charde	Marshall	区域总监	旧金山	36	2008-10-16	$470,600	6741	[email protected]
Haley	Kennedy	高级营销设计师	伦敦	43	2012-12-18	$313,500	3597	[email protected]
Tatyana	Fitzpatrick	区域总监	伦敦	19	2010-03-17	$385,750	1965	[email protected]
Michael	Silva	营销设计师	伦敦	66	2012-11-27	$198,500	1581	[email protected]
Paul	Byrd	首席财务官（CFO）	纽约	64	2010-06-09	$725,000	3059	[email protected]
Gloria	Little	系统管理员	纽约	59	2009-04-10	$237,500	1721	[email protected]
Bradley	Greer	软件工程师	伦敦	41	2012-10-13	$132,000	2558	[email protected]
Dai	Rios	人事主管	爱丁堡	35	2012-09-26	$217,500	2290	[email protected]
Jenette	Caldwell	开发主管	纽约	30	2011-09-03	$345,000	1937	[email protected]
Yuri	Berry	首席营销官（CMO）	纽约	40	2009-06-25	$675,000	6154	[email protected]
Caesar	Vance	售前支持	纽约	21	2011-12-12	$106,450	8330	[email protected]
Doris	Wilder	销售助理	Sydney	23	2010-09-20	$85,600	3023	[email protected]
Angelica	Ramos	首席执行官（CEO）	伦敦	47	2009-10-09	$1,200,000	5797	[email protected]
Gavin	Joyce	开发者	爱丁堡	42	2010-12-22	$92,575	8822	[email protected]
Jennifer	Chang	区域总监	新加坡	28	2010-11-14	$357,650	9239	[email protected]
Brenden	Wagner	软件工程师	旧金山	28	2011-06-07	$206,850	1314	[email protected]
Fiona	Green	首席运营官（COO）	旧金山	48	2010-03-11	$850,000	2947	[email protected]
Shou	Itou	区域营销	东京	20	2011-08-14	$163,000	8899	[email protected]
Michelle	House	集成专家	Sydney	37	2011-06-02	$95,400	2769	[email protected]
Suki	Burks	开发者	伦敦	53	2009-10-22	$114,500	6832	[email protected]
Prescott	Bartlett	技术作者	伦敦	27	2011-05-07	$145,000	3606	[email protected]
Gavin	Cortez	团队领导	旧金山	22	2008-10-26	$235,500	2860	[email protected]
Martena	Mccray	售后支持	爱丁堡	46	2011-03-09	$324,050	8240	[email protected]
Unity	Butler	营销设计师	旧金山	47	2009-12-09	$85,675	5384	[email protected]
Howard	Hatfield	办公室经理	旧金山	51	2008-12-16	$164,500	7031	[email protected]
Hope	Fuentes	秘书	旧金山	41	2010-02-12	$109,850	6318	[email protected]
Vivian	Harrell	财务主管	旧金山	62	2009-02-14	$452,500	9422	[email protected]
Timothy	Mooney	办公室经理	伦敦	37	2008-12-11	$136,200	7580	[email protected]
Jackson	Bradshaw	总监	纽约	65	2008-09-26	$645,750	1042	[email protected]
Olivia	Liang	支持工程师	新加坡	64	2011-02-03	$234,500	2120	[email protected]
Bruno	Nash	软件工程师	伦敦	38	2011-05-03	$163,500	6222	[email protected]
Sakura	Yamamoto	支持工程师	东京	37	2009-08-19	$139,575	9383	[email protected]
Thor	Walton	开发者	纽约	61	2013-08-11	$98,540	8327	[email protected]
Finn	Camacho	支持工程师	旧金山	47	2009-07-07	$87,500	2927	[email protected]
Serge	Baldwin	数据协调员	新加坡	64	2012-04-09	$138,575	8352	[email protected]
Zenaida	Frank	软件工程师	纽约	63	2010-01-04	$125,250	7439	[email protected]
Zorita	Serrano	软件工程师	旧金山	56	2012-06-01	$115,000	4389	[email protected]
Jennifer	Acosta	初级 Javascript 开发人员	爱丁堡	43	2013-02-01	$75,650	3431	[email protected]
Cara	Stevens	销售助理	纽约	46	2011-12-06	$145,600	3990	[email protected]
Hermione	Butler	区域总监	伦敦	47	2011-03-21	$356,250	1016	[email protected]
Lael	Greer	系统管理员	伦敦	21	2009-02-27	$103,500	6733	[email protected]
Jonas	Alexander	开发者	旧金山	30	2010-07-14	$86,500	8196	[email protected]
Shad	Decker	区域总监	爱丁堡	51	2008-11-13	$183,000	6373	[email protected]
Michael	Bruce	Javascript 开发人员	新加坡	29	2011-06-27	$183,000	5384	[email protected]
Donna	Snider	客户支持	纽约	27	2011-01-25	$112,000	4226	[email protected]

Javascript
HTML
CSS
Ajax
服务器端脚本
注释

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

$('#example').DataTable({ responsive: { details: { renderer: function (api, rowIdx, columns) { var data = $.map(columns, function (col, i) { return col.hidden ? '<tr data-dt-row="' + col.rowIndex + '" data-dt-column="' + col.columnIndex + '">' + '<td>' + col.title + ':' + '</td> ' + '<td>' + col.data + '</td>' + '</tr>' : ''; }).join(''); return data ? $('<table/>').append(data) : false; } } } });

new DataTable('#example', { responsive: { details: { renderer: function (api, rowIdx, columns) { let data = columns .map((col, i) => { return col.hidden ? '<tr data-dt-row="' + col.rowIndex + '" data-dt-column="' + col.columnIndex + '">' + '<td>' + col.title + ':' + '</td> ' + '<td>' + col.data + '</td>' + '</tr>' : ''; }) .join(''); let table = document.createElement('table'); table.innerHTML = data; return data ? table : false; } } } });

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

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

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

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

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

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

自定义子行渲染器

其他示例

基本初始化

显示类型

列控制

子行

样式

DataTables