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/
与恶龙缠斗过久,自身亦成为恶龙;凝视深渊过久,深渊将回以凝视…