我正在呈现Jquery DataTables表中的数据图,并想触发一个函数,以便在UI搜索中的表内容发生更改时调用此图,或者调用如下所示的搜索
$('#mytable').DataTable().column(0).search('my value').draw()
在我的桌子上,我有以下代码
var table = $('#mytable').DataTable({
//my settings here
}).on( 'search.dt', function () { updateGraph( GraphData ) ; } );
该代码正在运行,但是发生在排序事件上,例如对列进行排序,然后触发搜索和排序事件。是否只有在表内容更改时才触发更改?
有关更多信息,请参见此示例。
https://datatables.net/examples/advanced_init/dt_events.html
最佳答案
那是一个很好的收获!即使简单的排序,也从未意识到search.dt
事件是被触发的。实际上是一个特殊的问题。也许其他人会提出一个更好的主意,但是我认为保留当前行的“快照”并将其与触发search.dt
的行进行比较可以解决该问题。如果snapshot
是基于表行的默认顺序或index
而不是所应用的顺序,那么只有当dataTable中的数据实际上已更改时,我们才可以触发datachange.dt
事件:
var table = $('#example').DataTable({
snapshot: null
})
.on('search.dt', function() {
var snapshot = table
.rows({ search: 'applied', order: 'index'})
.data()
.toArray()
.toString();
var currentSnapshot = table.settings().init().snapshot;
if (currentSnapshot != snapshot) {
table.settings().init().snapshot = snapshot;
if (currentSnapshot != null) $('#example').trigger('datachange.dt')
}
})
.on('datachange.dt', function() {
alert('data has changed')
//updateGraph( GraphData )
})
演示-> http://jsfiddle.net/hftuew5u/