我正在呈现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/

10-05 20:57
查看更多