用於重新排序的漢堡選單圖示

此範例展示如何使用 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	辦公室經理	倫敦	2008-12-19	$90,560
23	Quinn Flynn	支援主管	愛丁堡	2013-03-03	$342,000
14	Charde Marshall	區域總監	舊金山	2008-10-16	$470,600
12	Haley Kennedy	資深行銷設計師	倫敦	2012-12-18	$313,500
54	Tatyana Fitzpatrick	區域總監	倫敦	2010-03-17	$385,750
37	Michael Silva	行銷設計師	倫敦	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	軟體工程師	倫敦	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)	倫敦	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	開發人員	倫敦	2009-10-22	$114,500
47	Prescott Bartlett	技術作家	倫敦	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	辦公室經理	倫敦	2008-12-11	$136,200
34	Jackson Bradshaw	總監	紐約	2008-09-26	$645,750
4	Olivia Liang	支援工程師	新加坡	2011-02-03	$234,500
3	Bruno Nash	軟體工程師	倫敦	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	區域總監	倫敦	2011-03-21	$356,250
25	Lael Greer	系統管理員	倫敦	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（如下所示），以便正確顯示表格。下面顯示了使用的額外 CSS

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

以下 CSS 函式庫檔案已載入以供此範例使用，以提供表格的樣式

此表格透過 Ajax 載入資料。下面顯示已載入的最新資料。當載入任何其他資料時，此資料將自動更新。

下面顯示用於執行此表格的伺服器端處理的腳本。請注意，這只是一個使用 PHP 的範例腳本。伺服器端處理腳本可以使用任何語言編寫，使用 DataTables 文件中描述的協定。

用於重新排序的漢堡選單圖示

其他範例

初始化

樣式

DataTables