filtering - Prevent DataTables custom filter from affecting all tables on a page

Question

When we add a custom filter to DataTables:

$.fn.dataTable.ext.search.push(function(settings, data, dataIndex) {
  ...
})

it works as expected on one table. However, if we have multiple tables on the same page, all filters affects all tables. How to create custom filters that only affect a specific table?

Answer 1

All custom filters works globally because $.fn.dataTable.ext.search is a global array any DataTable on a page takes into consideration when they are redrawn. There is no way around it, it is simply how DT is designed.

However, by using DT's plug-in architecture and simply hook into the relevant events, it is easy to replace the global array with local custom filters when needed, if any :

$.fn.dataTable.Api.register('filter.push', function(fn, draw) {
  if (!this.__customFilters) {
    var filters = this.__customFilters = [] 
    this.on('mousedown preDraw.dt', function() {
      $.fn.dataTable.ext.search = filters
    })
  }
  this.__customFilters.push(fn)
  $.fn.dataTable.ext.search = this.__customFilters 
  this.draw()
})

$.fn.dataTable.Api.register('filter.pop', function() {
  if (!this.__customFilters) return
  this.__customFilters.pop()
})

Thats it. Now, if you have a page with multiple DataTables, and you want a custom filter to work for one specific table only :

table.filter.push(function(settings, data, dataIndex) {
  ...
})

If you want to remove the filter table.filter.pop()

Here is a demo with three tables on the same page, each of them having their own custom filter implemented -> http://jsfiddle.net/gc4ow8yr/