用于重新排序的汉堡包图标

此范例表明 DataTables 的 columns.render 选项如何用于提供汉堡包图标，它通常在网络界面中用于指示项可重新排序。 reorder 类还用于鼠标效果。

序号	姓名	职位	办公室	入职日期	工资
2	Tiger Nixon	系统架构师	爱丁堡	2011-04-25	$320,800
22	Garrett Winters	会计	东京	2011-07-25	$170,750
6	Ashton Cox	初级技术作家	旧金山	2009-01-12	$86,000
41	Cedric Kelly	高级 JavaScript 开发人员	爱丁堡	2012-03-29	$433,060
55	Airi Satou	会计	东京	2008-11-28	$162,700
21	Brielle Williamson	集成专家	纽约	2012-12-02	$372,000
46	Herrod Chandler	销售助理	旧金山	2012-08-06	$137,500
50	Rhona Davidson	集成专家	东京	2010-10-14	$327,900
26	Colleen Hurst	JavaScript 开发人员	旧金山	2009-09-15	$205,500
18	Sonya Frost	软件工程师	爱丁堡	2008-12-13	$103,600
13	Jena Gaines	办公室经理	London	2008-12-19	$90,560
23	Quinn Flynn	技术支持负责人	爱丁堡	2013-03-03	$342,000
14	Charde Marshall	区域总监	旧金山	2008-10-16	$470,600
12	Haley Kennedy	高级营销设计师	London	2012-12-18	$313,500
54	Tatyana Fitzpatrick	区域总监	London	2010-03-17	$385,750
37	Michael Silva	营销设计师	London	2012-11-27	$198,500
32	Paul Byrd	首席财务官 (CFO)	纽约	2010-06-09	$725,000
35	Gloria Little	系统管理员	纽约	2009-04-10	$237,500
48	Bradley Greer	软件工程师	London	2012-10-13	$132,000
45	Dai Rios	人事主管	爱丁堡	2012-09-26	$217,500
17	Jenette Caldwell	开发主管	纽约	2011-09-03	$345,000
57	Yuri Berry	首席营销官 (CMO)	纽约	2009-06-25	$675,000
29	Caesar Vance	售前支持	纽约	2011-12-12	$106,450
56	Doris Wilder	销售助理	悉尼	2010-09-20	$85,600
36	Angelica Ramos	首席执行官 (CEO)	London	2009-10-09	$1,200,000
5	Gavin Joyce	开发人员	爱丁堡	2010-12-22	$92,575
51	Jennifer Chang	区域总监	新加坡	2010-11-14	$357,650
20	Brenden Wagner	软件工程师	旧金山	2011-06-07	$206,850
7	Fiona Green	首席运营官 (COO)	旧金山	2010-03-11	$850,000
1	Shou Itou	区域营销	东京	2011-08-14	$163,000
39	Michelle House	集成专家	悉尼	2011-06-02	$95,400
40	Suki Burks	开发人员	London	2009-10-22	$114,500
47	Prescott Bartlett	技术作家	London	2011-05-07	$145,000
52	Gavin Cortez	组长	旧金山	2008-10-26	$235,500
8	Martena Mccray	售后支持	爱丁堡	2011-03-09	$324,050
24	Unity Butler	营销设计师	旧金山	2009-12-09	$85,675
38	Howard Hatfield	办公室经理	旧金山	2008-12-16	$164,500
53	Hope Fuentes	秘书	旧金山	2010-02-12	$109,850
30	Vivian Harrell	财务主管	旧金山	2009-02-14	$452,500
28	Timothy Mooney	办公室经理	London	2008-12-11	$136,200
34	Jackson Bradshaw	总监	纽约	2008-09-26	$645,750
4	Olivia Liang	技术支持工程师	新加坡	2011-02-03	$234,500
3	Bruno Nash	软件工程师	London	2011-05-03	$163,500
31	Sakura Yamamoto	技术支持工程师	东京	2009-08-19	$139,575
11	Thor Walton	开发人员	纽约	2013-08-11	$98,540
10	Finn Camacho	技术支持工程师	旧金山	2009-07-07	$87,500
44	Serge Baldwin	数据协调员	新加坡	2012-04-09	$138,575
42	Zenaida Frank	软件工程师	纽约	2010-01-04	$125,250
27	Zorita Serrano	软件工程师	旧金山	2012-06-01	$115,000
49	Jennifer Acosta	初级 JavaScript 开发人员	爱丁堡	2013-02-01	$75,650
15	Cara Stevens	销售助理	纽约	2011-12-06	$145,600
9	Hermione Butler	区域总监	London	2011-03-21	$356,250
25	Lael Greer	系统管理员	London	2009-02-27	$103,500
33	Jonas Alexander	开发人员	旧金山	2010-07-14	$86,500
43	Shad Decker	区域总监	爱丁堡	2008-11-13	$183,000
16	Michael Bruce	JavaScript 开发人员	新加坡	2011-06-27	$183,000
19	Donna Snider	客户支持	纽约	2011-01-25	$112,000
序号	姓名	职位	办公室	入职日期	工资

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

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

$('#example').DataTable({ columnDefs: [ { className: 'reorder', render: function () { return '≡'; }, targets: 0 }, { orderable: false, targets: '_all' } ], order: [[1, 'asc']], rowReorder: { dataSrc: 1 } });

new DataTable('#example', { columnDefs: [ { className: 'reorder', render: () => '≡', targets: 0 }, { orderable: false, targets: '_all' } ], order: [[1, 'asc']], rowReorder: { dataSrc: 1 } });

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

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

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

table.dataTable td.reorder { color: #999; }

加载了以下 CSS 库文件以便在此示例中使用以提供表的样式

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

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

用于重新排序的汉堡包图标

其他示例

初始化

样式

DataTables