HTML5 data-* 正交資料

此範例展示了 ColReorder 使用 DataTables 的 HTML5 正交資料的能力，這允許不同的資料用於不同的選項，例如顯示、排序和搜尋。

姓名	職位	辦公室	年齡	開始日期	薪資
T. Nixon	系統架構師	愛丁堡	61	週一 4 月 25 日 11	$320,800/年
G. Winters	會計	東京	63	週一 7 月 25 日 11	$170,750/年
A. Cox	初級技術作家	舊金山	66	週一 1 月 12 日 09	$86,000/年
C. Kelly	資深 Javascript 開發人員	愛丁堡	22	週四 3 月 29 日 12	$433,060/年
A. Satou	會計	東京	33	週五 11 月 28 日 08	$162,700/年
B. Williamson	整合專家	紐約	61	週日 12 月 2 日 12	$372,000/年
H. Chandler	銷售助理	舊金山	59	週一 8 月 6 日 12	$137,500/年
R. Davidson	整合專家	東京	55	週四 10 月 14 日 10	$327,900/年
C. Hurst	Javascript 開發人員	舊金山	39	週二 9 月 15 日 09	$205,500/年
S. Frost	軟體工程師	愛丁堡	23	週六 12 月 13 日 08	$103,600/年
J. Gaines	辦公室經理	倫敦	30	週五 12 月 19 日 08	$90,560/年
Q. Flynn	支援主管	愛丁堡	22	週日 3 月 3 日 13	$342,000/年
C. Marshall	區域總監	舊金山	36	週四 10 月 16 日 08	$470,600/年
H. Kennedy	資深行銷設計師	倫敦	43	週二 12 月 18 日 12	$313,500/年
T. Fitzpatrick	區域總監	倫敦	19	週三 3 月 17 日 10	$385,750/年
M. Silva	行銷設計師	倫敦	66	週二 11 月 27 日 12	$198,500/年
P. Byrd	財務長 (CFO)	紐約	64	週三 6 月 9 日 10	$725,000/年
G. Little	系統管理員	紐約	59	週五 4 月 10 日 09	$237,500/年
B. Greer	軟體工程師	倫敦	41	週六 10 月 13 日 12	$132,000/年
D. Rios	人事主管	愛丁堡	35	週三 9 月 26 日 12	$217,500/年
J. Caldwell	開發主管	紐約	30	週六 9 月 3 日 11	$345,000/年
Y. Berry	行銷長 (CMO)	紐約	40	週四 6 月 25 日 09	$675,000/年
C. Vance	售前支援	紐約	21	週一 12 月 12 日 11	$106,450/年
D. Wilder	銷售助理	雪梨	23	週一 9 月 20 日 10	$85,600/年
A. Ramos	執行長 (CEO)	倫敦	47	週五 10 月 9 日 09	$1,200,000/年
G. Joyce	開發人員	愛丁堡	42	週三 12 月 22 日 10	$92,575/年
J. Chang	區域總監	新加坡	28	週日 11 月 14 日 10	$357,650/年
B. Wagner	軟體工程師	舊金山	28	週二 6 月 7 日 11	$206,850/年
F. Green	營運長 (COO)	舊金山	48	週四 3 月 11 日 10	$850,000/年
S. Itou	區域行銷	東京	20	週日 8 月 14 日 11	$163,000/年
M. House	整合專家	雪梨	37	週四 6 月 2 日 11	$95,400/年
S. Burks	開發人員	倫敦	53	週四 10 月 22 日 09	$114,500/年
P. Bartlett	技術作家	倫敦	27	週六 5 月 7 日 11	$145,000/年
G. Cortez	團隊領導	舊金山	22	週日 10 月 26 日 08	$235,500/年
M. Mccray	售後支援	愛丁堡	46	週三 3 月 9 日 11	$324,050/年
U. Butler	行銷設計師	舊金山	47	週三 12 月 9 日 09	$85,675/年
H. Hatfield	辦公室經理	舊金山	51	週二 12 月 16 日 08	$164,500/年
H. Fuentes	秘書	舊金山	41	週五 2 月 12 日 10	$109,850/年
V. Harrell	財務主管	舊金山	62	週六 2 月 14 日 09	$452,500/年
T. Mooney	辦公室經理	倫敦	37	週四 12 月 11 日 08	$136,200/年
J. Bradshaw	總監	紐約	65	週五 9 月 26 日 08	$645,750/年
O. Liang	支援工程師	新加坡	64	週四 2 月 3 日 11	$234,500/年
B. Nash	軟體工程師	倫敦	38	週二 5 月 3 日 11	$163,500/年
S. Yamamoto	支援工程師	東京	37	週三 8 月 19 日 09	$139,575/年
T. Walton	開發人員	紐約	61	週日 8 月 11 日 13	$98,540/年
F. Camacho	支援工程師	舊金山	47	週二 7 月 7 日 09	$87,500/年
S. Baldwin	資料協調員	新加坡	64	週一 4 月 9 日 12	$138,575/年
Z. Frank	軟體工程師	紐約	63	週一 1 月 4 日 10	$125,250/年
Z. Serrano	軟體工程師	舊金山	56	週五 6 月 1 日 12	$115,000/年
J. Acosta	初級 Javascript 開發人員	愛丁堡	43	週五 2 月 1 日 13	$75,650/年
C. Stevens	銷售助理	紐約	46	週二 12 月 6 日 11	$145,600/年
H. Butler	區域總監	倫敦	47	週一 3 月 21 日 11	$356,250/年
L. Greer	系統管理員	倫敦	21	週五 2 月 27 日 09	$103,500/年
J. Alexander	開發人員	舊金山	30	週三 7 月 14 日 10	$86,500/年
S. Decker	區域總監	愛丁堡	51	週四 11 月 13 日 08	$183,000/年
M. Bruce	Javascript 開發人員	新加坡	29	週一 6 月 27 日 11	$183,000/年
D. Snider	客戶支援	紐約	27	週二 1 月 25 日 11	$112,000/年
姓名	職位	辦公室	年齡	開始日期	薪資

Javascript
HTML
CSS
Ajax
伺服器端指令碼
註解

以下顯示的 Javascript 用於初始化此範例中顯示的表格

$('#example').DataTable({ colReorder: true });

new DataTable('#example', { colReorder: true });

除了上述程式碼之外，還載入了以下 Javascript 函式庫檔案以在此範例中使用

以下顯示的 HTML 是原始 HTML 表格元素，在 DataTables 增強之前

此範例使用了一些額外的 CSS，超出從函式庫檔案載入的內容（如下所示），以便正確顯示表格。使用的額外 CSS 如下所示

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

此表格通過 Ajax 載入資料。下面顯示的是已載入的最新資料。當載入任何額外資料時，此資料將自動更新。

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

HTML5 data-* 正交資料

其他範例

初始化和選項

與其他 DataTables 擴充套件的整合

樣式

DataTables