列控制子行

响应式具有两种内置方法来显示子行的控制元素：inline 是默认选项，它在第一列中显示控制，以及column 它设置一个控制列作为控制。控制列仅在某些其他列隐藏时显示，并且仅专用于行显示/隐藏控制。

此示例显示responsive.details.type 选项设置为column 以激活控制列。请注意，默认情况下，第一列用作控制，因此在初始化中，order 和 columns.orderable 选项用于禁用此列的排序，以及使用类dtr-control 使其收到正确的样式选项。

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

JavaScript
HTML
CSS
Ajax
服务器端脚本
评论

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

$('#example').DataTable({ columnDefs: [ { className: 'dtr-control', orderable: false, targets: 0 } ], order: [1, 'asc'], responsive: { details: { type: 'column' } } });

new DataTable('#example', { columnDefs: [ { className: 'dtr-control', orderable: false, targets: 0 } ], order: [1, 'asc'], responsive: { details: { type: 'column' } } });

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

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

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

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

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

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

列控制子行

其他示例

基本初始化

显示类型

列控制

子行

样式

DataTables