Recent project to draw a large number of tables used in the DataTabls drawing table, feeling particularly useful. There are a few very common method of recording it.
1、render()：
(1) action: the request over the data for further processing, the method returns the data are used as data Datatables end use.
(2) parameters: the render (Data, type, row, Meta)
Data: The current value of the cell;
type: type of data - with these values: filter, the display, type, Sort
row: the entire row of data
(3) Application:
converting the source data into a hyperlink:
$('#example').dataTable( {
"columnDefs": [ {
"targets": 0,
"data": "download_link",
"render": function ( data, type, full, meta ) {
return '<a href="'+data+'">Download</a>';
}
} ]
} );
2、createdcell
(1) the cell to allow the operator to create a callback DOM: ajax reading data from a data source or data source dom create a callback function performed by the cell. dom element replenishment operation of the cell.
（2）参数：function createdCell( cell, cellData, rowData, rowIndex, colIndex )
(3) Application of the Add button in the cell :( front)
$("#example").dataTable({
"columns": [
{"data": "work",
"createdCell": function(td, cellDate, rowData, row, col){
$(td).prepand('<button type="button">前加</button>'); // 在单元格前添加按钮
$(td).append('<button type="button">后加</button>'); // 在单元格后添加按钮
$(td).css({"position": "relative"}); // 定位
}
}
]
})
3、columns和columnDefs
(1) columns: column set the initialization properties. Use columns to define the columns, then you th number, we must define several months (if you do not specify any options may be null)
禁止第一列参与过滤(此表格有5列，其他列由于不指定选项，则为null)
$('#example').dataTable( {
"columns": [
{ "searchable": false },
null,
null,
null,
null
]
} );
(2) columnDefs: Set column definitions initialization properties
and columnsOption parameters like, this parameter allows you to specify the column settings options, which apply to one or more columns. Unlike columnsOption need to be defined for each column
This parameter is an array of objects defined columns by using columnDefs.targetsDT option tells Datatables is defined is that column, he can be the following:
0 or a positive integer - from left to right, column 0 begins
a negative number - from right to left column index (-1 is the last one)
a string - a string matching the class name and column
character string "_all" - All row
Further, Targets can specify both multiple columns, accepts an array (such as targets: [-1, -2])
// 应用场景一：在鼠标点击每一行时跳转到改行详情页
1、先给每一行添加class属性；
$("#example").dataTable({
"columnDefs": [
{
"targets": "_all", // 受影响咧
className: "detail-control', // 每列增加class属性
"render": $.fn.dataTable.render.text() // ？这行是干什么的？请指导的大神指导下
}
]
})
2、绑定点击事件
$("#example tbody").on("click", "td.detail-control", function(){
var data = $("#example").row(this).data(); // 获取选中行的数据
var data = $("example").row($(this).parents("tr")).data(); 同上
window.location.href="url=" + data.id;
})
