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 页面

一些常用的事件

事件名称介绍
xhrAJAX请求成功或者失败返回时,至于成功或者失败的信息包含在相应的回调函数参数中
draw表格重新显示数据完成时,比如使用了AJAX从服务器获取数据的场景,当重新使用AJAX异步获取数据并且重绘了表格之后,还要对表格中的每一行DOM元素使用其他的javascript逻辑进行加工,就可以在该事件的响应逻辑中进行处理
已标记关键词 清除标记
相关推荐
©️2020 CSDN 皮肤主题: 大白 设计师:CSDN官方博客 返回首页