JQueryDatatablesColumnsAPI参数具体说明版权声明

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. columnDefs: [

33. {

34. "targets": 0,

35. "searchable": false

36. },

37. {

38. "targets": [1,2,3],

39. "orderData": [ 2, 3, 4 ],

40. "searchable": false

41. },

42. {

43. "targets": [-3,-4],

44. "orderable": false,

45. "searchable": false

46. }

47. ],

48. columns: [

49. { "name": "name",

50. "cellType": "th",

51. "orderDataType": "dom-text",

52. "orderSequence": [ "desc","asc", "asc" ],

53. "className": "my_class",

54. "contentPadding": "mmm",

55. "createdCell": function (td, cellData, rowData, row, col) {

56. if ( row < 1 ) {

57. $(td).css(color, red);

58. }

59. },

60. "data": "name",

61. "searchable": true,

62. "title": "My Name"

63. },

64. {

65. "data": "position",

66. "render": function ( data, type, full, meta ) {

67. return <a href="+data+"> + data + ;

68. }

69. },

70. {

71. "data": phone,

72. "render": {

73. "_": "plain",

74. "filter": "filter",

75. "display": "display"

76. }

77. },

78. { "data": "office" },

79. { "data": "start_date", "type": "date" },

80. { "data": "extn", "visible": false},

81. { "data": "salary", "width": "20px"  },

82. {

83. "data": null,

84. "orderable": false,

85. "defaultContent": "Edit"

86. }

87. ]

88. }

89. );

参数的详细说明：

用户参数名称

源参数名称

英文解释

中文解释

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/