https://www.hangge.com/blog/cache/detail_1990.html
二十二、各種回調函數
1，行創建完畢後的回調
（1）基本介紹
每一行創建完後會自動調用 createdRow 函數。
（2）使用樣例
下面樣例判斷成績爲 100 分的人員，並對該行添加高亮樣式
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
|
<style media="screen">
table.dataTable tbody tr.important {
background-color: #FFFF00;
}
</style>
<table id="myTable">
<thead>
<tr>
<th>編號</th>
<th>姓名</th>
<th>成績</th>
</tr>
</thead>
</table>
<script type="text/javascript">
$(document).ready(function() {
$('#myTable').DataTable({
"ajax": 'data.txt',
"createdRow": function (row, data, dataIndex) {
// row : tr dom
// data: row data
// dataIndex:row data's index
if (data[2] == 100) {
$(row).addClass('important');
}
},
});
});
</script>
|
2，行創建完畢，且渲染後的回調
（1）基本介紹
rowCallback 函數順序排在 createdRow 後面，它只有等到顯示出來後纔會調用。所以效率不如 createdRow。
（2）使用樣例
這裏將不及格的成績改成紅色顯示。
![原文:jQuery - 第三方表格插件DataTables使用詳解11（創建、渲染、數據請求回調）]()
|
1
2
3
4
5
6
7
8
9
10
11
|
$('#myTable').DataTable({
"ajax": 'data.txt',
"rowCallback": function (row, data, index) {
// row : tr dom
// data: row data
// index:row data's index
if ( data[2] < 60 ) {
$('td:eq(2)', row).html('<span style="color:red"><b>'+data[2]+'</b></span>');
}
}
});
|
3，表頭渲染後的回調
（1）基本介紹
當 thead 渲染完畢後會調用 headerCallback 方法。
（2）使用樣例
這裏將第一列的列頭標題改成“當前顯示的條目數”。
|
1
2
3
4
5
6
7
8
|
$('#myTable').DataTable({
"ajax": 'data.txt',
"headerCallback": function (thead, data, start, end, display) {
//thead:dom， data:原始的datatable數據，display：當前顯示排序好的datatable數據（有可能經過排序）
// start end ：當前dispaly數據的開始結束序號
$(thead).find('th').eq(0).html( '當前有 '+(end-start)+' 條記錄' );
},
});
|
4，表尾渲染後的回調
（1）基本介紹
當 tfoot 渲染完畢後會調用 footerCallback 方法。
（2）使用樣例
這裏將最後一列的列腳改成顯示最高分。
|
1
2
3
4
5
6
7
8
9
10
11
12
13
|
$('#myTable').DataTable({
"ajax": 'data.txt',
"footerCallback": function (tfoot, data, start, end, display) {
//tfoot:dom， data:原始的datatable數據，display：當前顯示排序好的datatable數據（有可能經過排序）
// start end ：當前dispaly數據的開始結束序號
var api = this.api();
$( api.column( 2 ).footer() ).html("最高分：" +
api.column( 2 ).data().reduce( function ( a, b ) {
return parseInt(a) > parseInt(b) ? a : b;
}, 0 )
);
},
});
|
5，表格渲染時的回調
（1）基本介紹
- drawCallback 函數在每次 DataTable 渲染時都會調用。
- 但調用這個函數時，table 可能沒有渲染完成，所以不要在裏面操作 table 的 dom。如果需要操作 dom 應放在後面介紹的 initComplete 中。
（2）使用樣例
這裏我們將每次渲染後表格中所有的可見行輸出到控制檯。可以看到表格渲染了兩次，第一次內容爲空。
|
1
2
3
4
5
6
7
8
|
$('#myTable').DataTable({
"ajax": 'data.txt',
"drawCallback": function( settings ) {
var api = this.api();
// Output the data for the visible rows to the browser's console
console.log( api.rows( {page:'current'} ).data() );
},
});
|
6，表格顯示完畢後的回調
（1）initComplete 方法會在表格初始化並全部渲染完畢後調用。
|
1
2
3
4
5
6
|
$('#myTable').DataTable({
"ajax": 'data.txt',
"initComplete": function( settings, json ) {
$('div.loading').remove();
},
});
|
（2）當然我們也可以使用 DataTable 的初始化完畢事件響應來實現同樣的效果。
|
1
2
3
4
5
6
7
|
$('#myTable')
.on('init.dt', function (event, settings, json) {
$('div.loading').remove();
})
.DataTable({
"ajax": 'data.txt',
});
|
7，Ajax 數據加載完畢後的回調
（1）基本介紹
通過監聽 xhr.dt 事件，我們可以在 ajax 加載數據完成後做一些後續操作。（注意：這時數據並沒有被渲染出來）
（2）使用樣例
這裏將獲取到的數據打印到控制檯中。
|
1
2
3
4
5
6
7
|
$('#myTable')
.on('xhr.dt', function (e, settings, json, xhr) {
console.log("返回的數據爲：", json);
})
.DataTable({
"ajax": "data.php"
});
|
原文出自：www.hangge.com 轉載請保留原文鏈接：https://www.hangge.com/blog/cache/detail_1990.html
