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').dataTable(
- {
- data: [
- {
- "name": "Tiger Nixon1",
- "position": "System Architect1",
- "phone": { "plain": 5552368, "filter": "5552368 555-2368", "display": "555-2368" },
- "salary": "$3,1201",
- "start_date": "2011/04/25",
- "office": "Edinburgh1",
- "extn": "54211"
- },
- {
- "name": "Tiger Nixon2",
- "position": "System Architect2",
- "phone": { "plain": 5552368, "filter": "5552368 555-2368", "display": "555-2368" },
- "salary": "$3,1202",
- "start_date": "2011/04/25",
- "office": "Edinburgh2",
- "extn": "54212"
- },
- {
- "name": "Tiger Nixon3",
- "position": "System Architect3",
- "phone": { "plain": 5552368, "filter": "5552368 555-2368", "display": "555-2368" },
- "salary": "$3,1203",
- "start_date": "2011/04/25",
- "office": "Edinburgh3",
- "extn": "54213"
- }
- ],
- columnDefs: [
- {
- "targets": 0,
- "searchable": false
- },
- {
- "targets": [1,2,3],
- "orderData": [ 2, 3, 4 ],
- "searchable": false
- },
- {
- "targets": [-3,-4],
- "orderable": false,
- "searchable": false
- }
- ],
- columns: [
- { "name": "name",
- "cellType": "th",
- "orderDataType": "dom-text",
- "orderSequence": [ "desc","asc", "asc" ],
- "className": "my_class",
- "contentPadding": "mmm",
- "createdCell": function (td, cellData, rowData, row, col) {
- if ( row < 1 ) {
- $(td).css('color', 'red');
- }
- },
- "data": "name",
- "searchable": true,
- "title": "My Name"
- },
- {
- "data": "position",
- "render": function ( data, type, full, meta ) {
- return '<a href="'+data+'">' + data + '</a>';
- }
- },
- {
- "data": 'phone',
- "render": {
- "_": "plain",
- "filter": "filter",
- "display": "display"
- }
- },
- { "data": "office" },
- { "data": "start_date", "type": "date" },
- { "data": "extn", "visible": false},
- { "data": "salary", "width": "20px" },
- {
- "data": null,
- "orderable": false,
- "defaultContent": "<button>Edit</button>"
- }
- ]
- }
- );
参数详解：
| 用户参数名 | 源码参数名 | 英文解释 | 中文解释 |
| 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/
