How to do custom filtering in Datatables with comm

2019-07-13 09:31发布

问题:

I am using Datatables to display table data in my JSP page. I have enabled search functionality in my datatable.

Here is my fiddle

I want to allow the user to use "," (comma separated values) in the search box and want the comma's to be treated or OR. I have tried to implement it but as soon as i enter "," things don't work. What change should i do in order to achieve the required functionality

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

   var search = $('.dataTables_filter input').val().toLowerCase();
   var inputArray=search.split(",");

   var node = table.cell({ column: 0, row: dataIndex }).nodes().to$();

   var text = node.find('b').text();
   text += node.find('[name$=locationId] option:selected').text()
   text += node.find('[name$=empRole] option:selected').text();


   for(var i=0;i<inputArray.length;i++){
   return text.toLowerCase().indexOf(inputArray[i])>-1;
   }

return false;

})

回答1:

DataTables seems to stop calling search() internally if all rows is filtered out (there is probably other reasons). I could achieve the functionality by turning off() all bindings and trigger the filter programmatically; if you have a custom filter you can invoke it by draw() :

initComplete: function() {
  $('.dataTables_filter input').off().on('keyup', function(e) {
    table.draw()
  })
}

This also give the possibility to filter only when the user hits enter :

if (e.which == 13) table.draw()

Then only return true if there is a match, and a sanity check is also a good idea: obama, will give two indexes in the array, and everything matches an empty string :

$.fn.dataTable.ext.search.push(function(settings, data, dataIndex) {
   var search = $('.dataTables_filter input').val().toLowerCase().split(',');
   var node = table.cell({ column: 0, row: dataIndex }).nodes().to$();

   var text = node.find('b').text();
   text += node.find('[name$=locationId] option:selected').text()
   text += node.find('[name$=empRole] option:selected').text();
     text = text.toLowerCase();

   for (var i=0, l=search.length; i<l; i++) {
     if (search[i].trim() != '' && text.indexOf(search[i]) >-1) return true
   }
   return false;
})

Not sure if this is the brightest solution; or if it works as expected in your real life scenario, but at least it return correct rows for obama,, obama, trump, trump, obama, obama, test etc.

updated fiddle -> https://jsfiddle.net/1rde0nbm/16/