事件 Events


知道Datatables或者扩展功能何时执行了特定的操作(例如页面绘制)通常很有用,这样其他依赖的元素就可以做出相应的更新。为了提供此功能,Datatables将触发自定义DOM事件,可以使用 on()API 方法或$().on()方法侦听,然后采取行动。Datatables的自定义事件的工作方式与标准DOM事件完全相同,并且允许事件驱动的动作,这对于插件特别有用。

有关Datatables及其扩展功能将触发的事件的完整列表,请参阅事件参考文档

监听事件(Listening for events)


就像上面提及到的,你可以使用 on()API 方法或$().on()方法来监听这些事件。 on()API 的工作方式与$().on()一样,并提供了命名空间和多个事件。

请注意,所有的Datatables事件都是使用dt命名空间触发的。事件的命名空间是为了防止与其他JavaScript库触发的自定义事件发生冲突。因此,你因该将.dt附加到要监听的事件名称上(当使用 on()API 方法时,如果需要,命名空间会自动附加)。由于命名空间在jQuery中的工作方式,如果希望使用命名空间,则可以使用dt命名空间和自己定义命名空间。

比如,在Datatables中监听重绘的事件:

var table = $('#example').DataTable();
 
table.on( 'draw', function () {
    alert( 'Table redrawn' );
} );

上面的代码还可以使用如下的写法:

$('#example').on( 'draw.dt', function () {
    alert( 'Table redraw' );
} );

请注意,在使用$().on()方法时使用dt命名空间,而使用 on()API 方法会自动给你附加命名空间。

移除事件(Removing events)


$().on()一样,可以使用$().off() off()API 删除Datatables事件。这个是很重要的,从不再存在的对象移除事件(在摧毁之前),这样可以让JavaScript垃圾回收机制释放为事件及其附加的对象分配的内存。

除此之外,可以使用 one()API $().one()方法监听单次事件,其中事件处理程序将在首次触发事件后立即删除。

冒泡(Bubbling)


与典型的DOM事件一样,Datatables自定义事件在整个document中冒泡,因此你可以使用$().on()的委托形式或在DOM树上方的其他元素上监听事件。例如,这对于了解何时初始化Datatables是很有帮助的,可以使用 initEvent 事件来监听它,因此:

$(document).on( 'init.dt', function ( e, settings ) {
    var api = new $.fn.dataTable.Api( settings );
 
    console.log( 'New DataTable created:', api.table().node() );
} );

同样,此方法对于 xhrEvent 事件也很有用,它可以让你知道从上一次Datatables发起AJAX请求从服务器返回的JSON数据。

有关Datatables及其扩展功能将触发的事件的完整列表,请参阅事件参考文档

https://datatables.net/manual/events

Translation from DataTables.net, with permission