JQuery Datatables Columns API 參數詳細說明

---恢復內容開始---

Data Tables: http://datatables.NET/

Version: 1.10.0

Columns說明

雖然我們可以通過DOM直接獲取DataTables元素的信息，但是DataTables提供了更方便的方法，可以自定義列的屬性。下邊就讓我們一起來學習DataTables是怎麼來定義列屬性的。

• DataTables提供了兩個參數來定義列屬性：columns 和 columnDefs (源代碼里：aoColumns 和 aoColumnDefs)
• 為了用戶定義的參數更易於理解，DataTables提供的用戶參數名和源代碼的參數名是不一樣的，不過這兩個參數名，不管使用哪個，最終效果是一樣的。（＊以下參數說明都是用戶使用參數名）

columns 和 columnDefs的區別：

• 相同點：達到相同的效果
• 不同點：作用不一樣，使用不一樣（需要一個目標屬性在每個定義的對象（columnDefs.targetsDT））
• columns：設置特定列的初始化屬性，可以定義數組設置多列，數組長度必須等於表格的數量，只想使用預設值可以設為“NULL”，數組每個元素只能設置單列的屬性。
• columnDefs：與columns非常相似，該數組可以針對特定的列，多列或者所有列定義。數組可以任意長度。通過targets參數設置一個列或者多列，該屬性定義可以如下：
  • 0或正整數 - 從左邊的列索引計數 
  • 負整數 - 列索引從右邊計數
  • 一個字元串 - 類名稱將被匹配上的TH為列 
  • 字元串“_all” - 所有的列（即指定一個預設值）
• 兩個參數可以同時使用，但是columns定義的優先順序最高。
• 當columnDefs里對同一列有多個定義時，最開始的定義優先順序最高。

1. $('#example').dataTable(  
2.     {  
3.         data: [  
4.                 {  
5.                     "name":    "Tiger Nixon1",  
6.                     "position":   "System Architect1",  
7.                     "phone": { "plain": 5552368, "filter": "5552368 555-2368", "display": "555-2368" },  
8.                     "salary":    "$3,1201",  
9.                     "start_date": "2011/04/25",  
10.                     "office":    "Edinburgh1",  
11.                     "extn":    "54211"  
12.                 },  
13.                 {  
14.                     "name":    "Tiger Nixon2",  
15.                     "position":   "System Architect2",  
16.                     "phone": { "plain": 5552368, "filter": "5552368 555-2368", "display": "555-2368" },  
17.                     "salary":    "$3,1202",  
18.                     "start_date": "2011/04/25",  
19.                     "office":    "Edinburgh2",  
20.                     "extn":    "54212"  
21.                 },  
22.                 {  
23.                     "name":    "Tiger Nixon3",  
24.                     "position":   "System Architect3",  
25.                     "phone": { "plain": 5552368, "filter": "5552368 555-2368", "display": "555-2368" },  
26.                     "salary":    "$3,1203",  
27.                     "start_date": "2011/04/25",  
28.                     "office":    "Edinburgh3",  
29.                     "extn":    "54213"  
30.                 }  
31.                   
32.         ],  
33.           
34.         columnDefs: [  
35.             {  
36.                 "targets": 0,  
37.                 "searchable": false  
38.             },  
39.             {  
40.                 "targets": [1,2,3],  
41.                 "orderData": [ 2, 3, 4 ],  
42.                 "searchable": false  
43.             },  
44.             {  
45.                 "targets": [-3,-4],  
46.                 "orderable": false,  
47.                 "searchable": false  
48.             }  
49.         ],  
50.           
51.         columns: [  
52.             { "name": "name",   
53.               "cellType": "th",  
54.               "orderDataType": "dom-text",  
55.               "orderSequence": [ "desc","asc", "asc" ],  
56.               "className": "my_class",  
57.               "contentPadding": "mmm",  
58.               "createdCell": function (td, cellData, rowData, row, col) {  
59.                   if ( row < 1 ) {  
60.                     $(td).css('color', 'red');  
61.                   }  
62.                 },  
63.               "data": "name",   
64.               "searchable": true,   
65.               "title": "My Name"  
66.             },  
67.             {   
68.                 "data": "position",  
69.                 "render": function ( data, type, full, meta ) {  
70.                     return '<a href="'+data+'">' + data + '</a>';  
71.                 }  
72.             },  
73.             {  
74.                 "data": 'phone',  
75.                 "render": {  
76.                   "_": "plain",  
77.                   "filter": "filter",  
78.                   "display": "display"  
79.                 }  
80.             },  
81.             { "data": "office" },  
82.             { "data": "start_date", "type": "date" },  
83.             { "data": "extn", "visible": false},  
84.             { "data": "salary", "width": "20px"  },  
85.             {  
86.                 "data": null,  
87.                 "orderable": false,  
88.                 "defaultContent": "<button>Edit</button>"  
89.             }  
90.   
91.         ]  
92.     }  
93. );  

參考資料：http://datatables.Net/reference/option/

---恢復內容結束---