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').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>"
				}

			]
		}
	);

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