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(创建、渲染、数据请求回调)](https://i-blog.csdnimg.cn/blog_migrate/453962ed3880d4a781d16a0aec758d88.png)
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