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裏對同一列有多個定義時，最開始的定義優先級最高。

example：Js代碼 

 

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. );  

  

參數詳解：

用戶參數名	源碼參數名	英文解釋	中文解釋
cellType	sCellType	Cell type to be created for a column	設置列標籤的類型（ex：th，td）
className	sClass	Class to assign to each cell in the column	設置列的class屬性值
contentPadding	sContentPadding	Add padding to the text content used when calculating the optimal with for a table.	設置填充內容，以計算與優化爲一個表時所使用的文本內容，通常不須要設置
createdCell	fnCreatedCell	Cell created callback to allow DOM manipulation	設置cell建立完後的回調函數，設置背景色或者添加行
data	mData	Set the data source for the column from the rows data object / array	設置單元格里的值
defaultContent	sDefaultContent	Set default, static, content for a column	設置列的默認值
name	sName	Set a descriptive name for a column	設置列的描述性名稱
orderable	bSortable	Enable or disable ordering on this column	設置列是否能夠排序
orderData	aDataSort	Define multiple column ordering as the default order for a column	設置多列排序時列的默認順序
orderDataType	sSortDataType	Live DOM sorting type assignment
orderSequence	asSorting	Order direction application sequence	設置列的默認排序，能夠改變列排序的順序處理
render	mRender	Render (process) the data for use in the table
searchable	bSearchable	Enable or disable filtering on the data in this column	設置列的數據是否過濾
title	sTitle	Set the column title	設置列的標題
type	sType	Set the column type - used for filtering and sorting string processing. Four types (string, numeric, date and html (which will strip HTML tags before ordering)) are currently available.	設置列的類型，用於過濾和排序的字符串處理。
visible	bVisible	Enable or disable the display of this column	設置列是否顯示
width	sWidth	Column width assignment	定義列的寬度

 

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