Datatables_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代码 <EMBED height=15 type=application/x-shockwave-flash pluginspage=http://www.macromedia.com/go/getflashplayer width=14 src=http://linleizi.iteye.com/javascripts/syntaxhighlighter/clipboard_new.swf allowscriptaccess="always" quality="high" flashvars="clipboard=%09%24('%23example').dataTable(%0A%09%09%7B%0A%09%09%09data%3A%20%5B%0A%09%09%09%09%09%7B%0A%09%09%09%09%09%20%20%20%20%22name%22%3A%20%20%20%20%22Tiger%20Nixon1%22%2C%0A%09%09%09%09%09%20%20%20%20%22position%22%3A%20%20%20%22System%20Architect1%22%2C%0A%09%09%09%09%09%20%20%20%20%22phone%22%3A%20%7B%20%22plain%22%3A%205552368%2C%20%22filter%22%3A%20%225552368%20555-2368%22%2C%20%22display%22%3A%20%22555-2368%22%20%7D%2C%0A%09%09%09%09%09%20%20%20%20%22salary%22%3A%20%20%20%20%22%243%2C1201%22%2C%0A%09%09%09%09%09%20%20%20%20%22start_date%22%3A%20%222011%2F04%2F25%22%2C%0A%09%09%09%09%09%20%20%20%20%22office%22%3A%20%20%20%20%22Edinburgh1%22%2C%0A%09%09%09%09%09%20%20%20%20%22extn%22%3A%20%20%20%20%2254211%22%0A%09%09%09%09%09%7D%2C%0A%09%09%09%09%09%7B%0A%09%09%09%09%09%20%20%20%20%22name%22%3A%20%20%20%20%22Tiger%20Nixon2%22%2C%0A%09%09%09%09%09%20%20%20%20%22position%22%3A%20%20%20%22System%20Architect2%22%2C%0A%09%09%09%09%09%20%20%20%20%22phone%22%3A%20%7B%20%22plain%22%3A%205552368%2C%20%22filter%22%3A%20%225552368%20555-2368%22%2C%20%22display%22%3A%20%22555-2368%22%20%7D%2C%0A%09%09%09%09%09%20%20%20%20%22salary%22%3A%20%20%20%20%22%243%2C1202%22%2C%0A%09%09%09%09%09%20%20%20%20%22start_date%22%3A%20%222011%2F04%2F25%22%2C%0A%09%09%09%09%09%20%20%20%20%22office%22%3A%20%20%20%20%22Edinburgh2%22%2C%0A%09%09%09%09%09%20%20%20%20%22extn%22%3A%20%20%20%20%2254212%22%0A%09%09%09%09%09%7D%2C%0A%09%09%09%09%09%7B%0A%09%09%09%09%09%20%20%20%20%22name%22%3A%20%20%20%20%22Tiger%20Nixon3%22%2C%0A%09%09%09%09%09%20%20%20%20%22position%22%3A%20%20%20%22System%20Architect3%22%2C%0A%09%09%09%09%09%20%20%20%20%22phone%22%3A%20%7B%20%22plain%22%3A%205552368%2C%20%22filter%22%3A%20%225552368%20555-2368%22%2C%20%22display%22%3A%20%22555-2368%22%20%7D%2C%0A%09%09%09%09%09%20%20%20%20%22salary%22%3A%20%20%20%20%22%243%2C1203%22%2C%0A%09%09%09%09%09%20%20%20%20%22start_date%22%3A%20%222011%2F04%2F25%22%2C%0A%09%09%09%09%09%20%20%20%20%22office%22%3A%20%20%20%20%22Edinburgh3%22%2C%0A%09%09%09%09%09%20%20%20%20%22extn%22%3A%20%20%20%20%2254213%22%0A%09%09%09%09%09%7D%0A%09%09%09%09%09%0A%09%09%09%5D%2C%0A%09%09%09%0A%09%09%09columnDefs%3A%20%5B%0A%09%09%09%09%7B%0A%09%09%09%09%20%20%20%20%22targets%22%3A%200%2C%0A%09%09%09%09%20%20%20%20%22searchable%22%3A%20false%0A%09%09%09%09%7D%2C%0A%09%09%09%09%7B%0A%09%09%09%09%20%20%20%20%22targets%22%3A%20%5B1%2C2%2C3%5D%2C%0A%09%09%09%09%20%20%20%20%22orderData%22%3A%20%5B%202%2C%203%2C%204%20%5D%2C%0A%09%09%09%09%20%20%20%20%22searchable%22%3A%20false%0A%09%09%09%09%7D%2C%0A%09%09%09%09%7B%0A%09%09%09%09%20%20%20%20%22targets%22%3A%20%5B-3%2C-4%5D%2C%0A%09%09%09%09%20%20%20%20%22orderable%22%3A%20false%2C%0A%09%09%09%09%20%20%20%20%22searchable%22%3A%20false%0A%09%09%09%09%7D%0A%09%09%09%5D%2C%0A%09%09%09%0A%09%09%09columns%3A%20%5B%0A%09%09%09%20%20%20%20%7B%20%22name%22%3A%20%22name%22%2C%20%0A%09%09%09%20%20%20%20%20%20%22cellType%22%3A%20%22th%22%2C%0A%09%09%09%20%20%20%20%20%20%22orderDataType%22%3A%20%22dom-text%22%2C%0A%09%09%09%20%20%20%20%20%20%22orderSequence%22%3A%20%5B%20%22desc%22%2C%22asc%22%2C%20%22asc%22%20%5D%2C%0A%09%09%09%20%20%20%20%20%20%22className%22%3A%20%22my_class%22%2C%0A%09%09%09%20%20%20%20%20%20%22contentPadding%22%3A%20%22mmm%22%2C%0A%09%09%09%20%20%20%20%20%20%22createdCell%22%3A%20function%20(td%2C%20cellData%2C%20rowData%2C%20row%2C%20col)%20%7B%0A%09%09%09%20%20%20%20%20%20%20%20%20%20if%20(%20row%20%3C%201%20)%20%7B%0A%09%09%09%20%20%20%20%20%20%20%20%20%20%20%20%24(td).css('color'%2C%20'red')%3B%0A%09%09%09%20%20%20%20%20%20%20%20%20%20%7D%0A%09%09%09%20%20%20%20%20%20%20%20%7D%2C%0A%09%09%09%20%20%20%20%20%20%22data%22%3A%20%22name%22%2C%20%0A%09%09%09%20%20%20%20%20%20%22searchable%22%3A%20true%2C%20%0A%09%09%09%20%20%20%20%20%20%22title%22%3A%20%22My%20Name%22%0A%09%09%09%20%20%20%20%7D%2C%0A%09%09%09%09%7B%20%0A%09%09%09%20%20%20%20%09%22data%22%3A%20%22position%22%2C%0A%09%09%09%09%20%20%20%20%22render%22%3A%20function%20(%20data%2C%20type%2C%20full%2C%20meta%20)%20%7B%0A%09%09%09%09%09%20%09return%20'%3Ca%20href%3D%22'%2Bdata%2B'%22%3E'%20%2B%20data%20%2B%20'%3C%2Fa%3E'%3B%0A%09%09%09%09%09%7D%0A%09%09%09%20%20%20%20%7D%2C%0A%09%09%09%20%20%20%20%7B%0A%09%09%09%09%09%22data%22%3A%20'phone'%2C%0A%09%09%09%09%20%20%20%20%22render%22%3A%20%7B%0A%09%09%09%09%20%20%20%20%20%20%22_%22%3A%20%22plain%22%2C%0A%09%09%09%09%20%20%20%20%20%20%22filter%22%3A%20%22filter%22%2C%0A%09%09%09%09%20%20%20%20%20%20%22display%22%3A%20%22display%22%0A%09%09%09%09%20%20%20%20%7D%0A%09%09%09%20%20%20%20%7D%2C%0A%09%09%09%20%20%20%20%7B%20%22data%22%3A%20%22office%22%20%7D%2C%0A%09%09%09%09%7B%20%22data%22%3A%20%22start_date%22%2C%20%22type%22%3A%20%22date%22%20%7D%2C%0A%09%09%09%09%7B%20%22data%22%3A%20%22extn%22%2C%20%22visible%22%3A%20false%7D%2C%0A%09%09%09%09%7B%20%22data%22%3A%20%22salary%22%2C%20%22width%22%3A%20%2220px%22%20%20%7D%2C%0A%09%09%09%20%20%20%20%7B%0A%09%09%09%09%20%09%22data%22%3A%20null%2C%0A%09%09%09%09%20%09%22orderable%22%3A%20false%2C%0A%09%09%09%09%20%20%20%20%22defaultContent%22%3A%20%22%3Cbutton%3EEdit%3C%2Fbutton%3E%22%0A%09%09%09%09%7D%0A%0A%09%09%09%5D%0A%09%09%7D%0A%09)%3B" wmode="transparent"> 

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	定义列的宽度