jQuery 之 DataTable 中 参数详解和 columns 的属性讲解

jQuery 之 DataTable 中 参数详解和 columns 的属性讲解

当columnDefs里对同一列有多个定义时,最开始的定义优先级最高。example:

Js代码 收藏代码

$('#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 '' + data + '';

}

},

{

"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": ""

}

]

}

); 参数详解:用户参数名源码参数名英文解释中文解释cellType

sCellType

Cell type to be created for a column 设置列标签的类型(ex:th,td)classNamesClass

Class to assign to each cell in the column设置列的class属性值contentPaddingsContentPadding

Add padding to the text content used when calculating the optimal with for a table.设置填充内容,以计算与优化为一个表时所使用的文本内容,一般不需要设置createdCellfnCreatedCell

Cell created callback to allow DOM manipulation设置cell创建完后的回调函数,设置背景色或者添加行 datamData

Set the data source for the column from the rows data object / array设置单元格里的值defaultContentsDefaultContent

Set default, static, content for a column设置列的默认值namesName

Set a descriptive name for a column设置列的描述性名称orderablebSortable

Enable or disable ordering on this column设置列是否可以排序orderDataaDataSort

Define multiple column ordering as the default order for a column设置多列排序时列的默认顺序orderDataTypesSortDataType Live DOM sorting type assignment orderSequenceasSorting

Order direction application sequence设置列的默认排序,可以改变列排序的顺序处理rendermRender

Render (process) the data for use in the table searchablebSearchable

Enable or disable filtering on the data in this column设置列的数据是否过滤titlesTitle Set the column title设置列的标题typesTypeSet 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.

设置列的类型,用于过滤和排序的字符串处理。visiblebVisibleEnable or disable the display of this column设置列是否显示widthsWidthColumn width assignment定义列的宽度参考资料:http://datatables.net/reference/option/