jQuery DataTables的事件响应机制

概述

jQuery DataTables及其扩展部分在某些特定操作执行时，会产生DOM事件，这样利用DOM事件监听机制就可以在某些我们关心的事件发生时执行特定的逻辑。比如，当表数据的重新绘制结束时做一些操作。

两种事件监听启用和关闭方式

jQuery.on()/off()

// 例子 : AJAX事件发生时，也就是AJAX请求结果返回时(可能成功也可能失败)的处理逻辑
var table = $('#example').DataTable( {
    ajax: "/data.json"
} );
// 事件响应逻辑使用jQuery.on()方法绑定，事件名称中带 dt , 表示使用 DataTables的命名空间以避免冲突 
$('#example').on( 'xhr.dt', function ( e, settings, json ) {
    $('#example').off( 'xhr.dt' );//关闭监听该事件
    console.log( 'Ajax event occurred. Returned data: ', json );
} );

DataTable.on()/off()

// 例子 : AJAX事件发生时，也就是AJAX请求结果返回时(可能成功也可能失败)的处理逻辑
var table = $('#example').DataTable( {
    ajax: "/data.json"
} );

// 事件响应逻辑使用DataTable.on()方法绑定，事件名称中不用带 dt 
table.on( 'xhr', function ( e, settings, json ) {
    table.off( 'xhr' );//关闭监听该事件
    console.log( 'Ajax event occurred. Returned data: ', json );
} );

支持的事件清单

官方文档 Events 页面

一些常用的事件

事件名称	介绍
xhr	AJAX请求成功或者失败返回时，至于成功或者失败的信息包含在相应的回调函数参数中
draw	表格重新显示数据完成时，比如使用了AJAX从服务器获取数据的场景，当重新使用AJAX异步获取数据并且重绘了表格之后，还要对表格中的每一行DOM元素使用其他的javascript逻辑进行加工，就可以在该事件的响应逻辑中进行处理