JQuery Datatables Columns API 参数详细说明

我会带着你远行 2021-11-11 10:06 508阅读 0赞

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代码  [![收藏代码][aHR0cDovL2xpbmxlaXppLml0ZXllLmNvbS9pbWFnZXMvaWNvbl9zdGFyLnBuZw]][aHR0cDovL2xpbmxlaXppLml0ZXllLmNvbS9pbWFnZXMvaWNvbl9zdGFyLnBuZw 1]

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

**参数详解：**

<table> 
 <tbody> 
 <tr> 
 <td>用户参数名</td> 
 <td>源码参数名</td> 
 <td>英文解释</td> 
 <td>中文解释</td> 
 </tr> 
 <tr> 
 <td> cellType </td> 
 <td> &nbsp; sCellType </td> 
 <td>Cell type to be created for a column&nbsp;</td> 
 <td>设置列标签的类型（ex：th，td）</td> 
 </tr> 
 <tr> 
 <td>className</td> 
 <td> sClass </td> 
 <td>Class to assign to each cell in the column</td> 
 <td>设置列的class属性值</td> 
 </tr> 
 <tr> 
 <td>contentPadding</td> 
 <td> sContentPadding </td> 
 <td>Add padding to the text content used when calculating the optimal with for a table.</td> 
 <td>设置填充内容，以计算与优化为一个表时所使用的文本内容，一般不需要设置</td> 
 </tr> 
 <tr> 
 <td>createdCell</td> 
 <td> fnCreatedCell </td> 
 <td>Cell created callback to allow DOM manipulation</td> 
 <td>设置cell创建完后的回调函数，设置背景色或者添加行&nbsp;</td> 
 </tr> 
 <tr> 
 <td>data</td> 
 <td> mData </td> 
 <td>Set the data source for the column from the rows data object / array</td> 
 <td>设置单元格里的值</td> 
 </tr> 
 <tr> 
 <td>defaultContent</td> 
 <td> sDefaultContent </td> 
 <td>Set default, static, content for a column</td> 
 <td>设置列的默认值</td> 
 </tr> 
 <tr> 
 <td>name</td> 
 <td> sName </td> 
 <td>Set a descriptive name for a column</td> 
 <td>设置列的描述性名称</td> 
 </tr> 
 <tr> 
 <td>orderable</td> 
 <td> bSortable </td> 
 <td>Enable or disable ordering on this column</td> 
 <td>设置列是否可以排序</td> 
 </tr> 
 <tr> 
 <td>orderData</td> 
 <td> aDataSort </td> 
 <td>Define multiple column ordering as the default order for a column</td> 
 <td>设置多列排序时列的默认顺序</td> 
 </tr> 
 <tr> 
 <td>orderDataType</td> 
 <td>sSortDataType&nbsp;</td> 
 <td>Live DOM sorting type assignment</td> 
 <td>&nbsp;</td> 
 </tr> 
 <tr> 
 <td>orderSequence</td> 
 <td> asSorting </td> 
 <td>Order direction application sequence</td> 
 <td>设置列的默认排序，可以改变列排序的顺序处理</td> 
 </tr> 
 <tr> 
 <td>render</td> 
 <td> mRender </td> 
 <td>Render (process) the data for use in the table</td> 
 <td>&nbsp;</td> 
 </tr> 
 <tr> 
 <td>searchable</td> 
 <td> bSearchable </td> 
 <td>Enable or disable filtering on the data in this column</td> 
 <td>设置列的数据是否过滤</td> 
 </tr> 
 <tr> 
 <td>title</td> 
 <td>sTitle&nbsp;</td> 
 <td>Set the column title</td> 
 <td>设置列的标题</td> 
 </tr> 
 <tr> 
 <td>type</td> 
 <td>sType</td> 
 <td> 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. </td> 
 <td>设置列的类型，用于过滤和排序的字符串处理。</td> 
 </tr> 
 <tr> 
 <td>visible</td> 
 <td>bVisible</td> 
 <td>Enable or disable the display of this column</td> 
 <td>设置列是否显示</td> 
 </tr> 
 <tr> 
 <td>width</td> 
 <td>sWidth</td> 
 <td>Column width assignment</td> 
 <td>定义列的宽度</td> 
 </tr> 
 </tbody> 
</table>

参考资料：http://datatables.net/reference/option/

[aHR0cDovL2xpbmxlaXppLml0ZXllLmNvbS9pbWFnZXMvaWNvbl9zdGFyLnBuZw]: https://imgconvert.csdnimg.cn/aHR0cDovL2xpbmxlaXppLml0ZXllLmNvbS9pbWFnZXMvaWNvbl9zdGFyLnBuZw
[aHR0cDovL2xpbmxlaXppLml0ZXllLmNvbS9pbWFnZXMvaWNvbl9zdGFyLnBuZw 1]: /images/20211109/50a528170f984f00a6be80af760d1f69.png