Filter HTML Table using multiple values separated by Comma using JQuery

Question

I have a filter code which is working fine if i give a single value , but i have more than 100+ values in my table, and i have to search for two or three value in the table at same time, so i planned to use comma for that, like in a single search box i will write the values i have to search in a table column in a comma separated fashion.

SO currently it is working, but it is not filtering when i give comma, Since am new to this scripting and web development, Can anyone help me.

$('#tblfiles').dataTable({
  "search": {
    "smart": true,
    "regex": true
  }
});









  
    
      ID
      Name
      Country
      StDID
    
  
  
    
      1
      pooe
      country1
      Sgyt13
    
    
      2
      AAA
      country2
      P5372
    
    
      3
      BBB
      country3
      P5972

So here i have to fetch rows which contain Name as AAA and BBB, so instead on searching and getting value one by one, in search bar i have to give AAA, BBB .. so that it will fetch both corresponding rows to me.

So here it replaces the first % but not the second

user_1788884 · Answer

Using Regex Search

The DataTables Search Option supports regex as a search input. If you'll disable smart search, and only enable regex search, you can use the regex syntax to lookup multiple values in the table.

This might work for you as is since you can look up multiple values like this: country1|country2

$('#tblfiles').dataTable({
  'search': {
    'smart': false,
    'regex': true
  }
});

Exact Match

If you'll search for country1|country2, the table will find all items that contain either country1 or country2. Using ^ and $ to specify where the match should be, doesn't work with dataTables as expected.

If you want to make country1|country2 return an exact match, simulating the ^ and $ use, you can wrap the search term with \b, which in this case, works similar to ^ and $.

// exact match
const regex = '\b(' + searchTerm + ')\b';

Using commas as delimiters

If you want to use commas as delimiters instead of the regex's default of |, you can use the same function to replace all commas in the search term to pipes. This way, your users will use commas to search multiple terms at the same time instead of |:

// comma delimiter
const searchTerm = this.value.toLowerCase().replace(/,/g, '|');

Examples (with Exact Match enabled)

Search: country1,country2
Result: Will return country1 and country2 specifically

Search: country[1-2][0-9]
Result: Will return all countries between country10 and country 29

Search: o.*
Result: Will return all rows containing a string that starts with o. Without adding the .*, the search will look for an exact match for o (surrounded by something that is not a word) and will return nothing.

The main difference is if the search regex is strict or loose

const table = $('#tblfiles');

/* NOT IMPORTANT FOR ANSWER */
/* This is here just to generate data in the table */
const tableBody = table.find('tbody');
for (const x of Array(100).keys()) {
  tableBody.append(`
  ${ x }
  ${ chance.name() }
  country${ x }
  ${ chance.string({ length: 4, alpha: true, numeric: true }) }
  `)
}
/* ANSWER CONTINUE HERE */


$('#tblfiles').dataTable({
  'search': {
    'smart': false,
    'regex': true
  }
});

// This is used to force the search value to search whole words.
// This makes sure that searching for `country1|country2` will
// still find an exact match
$('.dataTables_filter input').unbind().bind('keyup', function() {
  const searchTerm = this.value.toLowerCase().replace(/,/g, '|');
  const regex = '\b(' + searchTerm + ')\b';
  table.DataTable().rows().search(regex, true, false).draw();
});

body {
  font-size: 12px !important;
  padding: 2em;
}

.dataTables_length {
  display: none;
}












  
    
      ID
      Name
      Country
      StDID

Filter HTML Table using multiple values separated by Comma using JQuery

1 Answers

Using Regex Search

Exact Match

Using commas as delimiters

Examples (with Exact Match enabled)