二十二、各种回调函数
1，行创建完毕后的回调
(1)基本介绍
每一行创建完后会自动调用 createdRow函数。
(2)使用样例
下面样例判断成绩为 100分的人员，并对该行添加高亮样式
table.dataTable tbody tr.important {
background-color: #FFFF00;
}
编号姓名成绩
$(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');
}
},
});
});
2，行创建完毕，且渲染后的回调
(1)基本介绍
rowCallback函数顺序排在 createdRow后面，它只有等到显示出来后才会调用。所以效率不如 createdRow。
(2)使用样例
这里将不及格的成绩改成红色显示。
$('#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(''+data[2]+'');
}
}
});
3，表头渲染后的回调
(1)基本介绍
当 thead渲染完毕后会调用 headerCallback方法。
(2)使用样例
这里将第一列的列头标题改成“当前显示的条目数”。
$('#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)使用样例
这里将最后一列的列脚改成显示最高分。
$('#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)使用样例
这里我们将每次渲染后表格中所有的可见行输出到控制台。可以看到表格渲染了两次，第一次内容为空。
$('#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方法会在表格初始化并全部渲染完毕后调用。
$('#myTable').DataTable({
"ajax": 'data.txt',
"initComplete": function( settings, json ) {
$('div.loading').remove();
},
});
(2)当然我们也可以使用 DataTable的初始化完毕事件响应来实现同样的效果。
$('#myTable')
.on('init.dt', function (event, settings, json) {
$('div.loading').remove();
})
.DataTable({
"ajax": 'data.txt',
});
7，Ajax 数据加载完毕后的回调
(1)基本介绍
通过监听 xhr.dt 事件，我们可以在 ajax加载数据完成后做一些后续操作。(注意：这时数据并没有被渲染出来)
(2)使用样例
这里将获取到的数据打印到控制台中。
$('#myTable')
.on('xhr.dt', function (e, settings, json, xhr) {
console.log("返回的数据为：", json);
})
.DataTable({
"ajax": "data.php"
});
886
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
