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
