HTML5 data-* 屬性 - 儲存格資料

DataTables 可以針對不同的動作（顯示、排序和搜尋）使用不同的資料，這對於將顯示的資料轉換為對終端使用者來說直觀，同時針對其他動作使用不同或更複雜的資料非常強大。例如，如果表格包含格式為 xxx-xxxx 的格式化電話號碼，使用者可能會直觀地搜尋該號碼但沒有破折號。使用正交資料進行搜尋可以同時使用兩種形式的電話號碼，而表格中僅顯示格式良好的號碼。

DataTables 可以為其不同的動作取得此正交資料的一種方法是透過自訂 HTML5 data 屬性。DataTables 會自動偵測 HTML 元素上的四個不同屬性

data-sort 或 data-order - 用於排序資料
data-filter 或 data-search - 用於搜尋資料

此範例顯示了 data-sort 和 data-filter 屬性的使用。在此範例中，第一欄已格式化，因此名字已縮寫，但全名仍然可搜尋（例如搜尋「Bruno」）。此外，雖然最後一欄包含非數值資料，但該欄仍會正確地依數值排序，因為該欄已設定了帶有純數值資料的 data-sort / data-order 屬性。

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

Javascript
HTML
CSS
Ajax
伺服器端腳本
註解

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

$('#example').DataTable();

new DataTable('#example');

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

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

此範例除了從函式庫檔案載入的 CSS 之外（如下所示），還使用了一些額外的 CSS，以便正確顯示表格。使用的其他 CSS 如下所示

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

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

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

HTML5 data-* 屬性 - 儲存格資料

其他範例

基本初始化

進階初始化

資料來源

語言和國際化

DateTime

外掛

樣式設定

版面配置

API

Ajax

伺服器端

DataTables