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
  }
});

<script src="https://code.jquery.com/jquery-3.3.1.js"></script>
<script src="https://cdn.datatables.net/1.10.19/js/jquery.dataTables.min.js"></script>
<script src="https://cdn.datatables.net/1.10.19/js/dataTables.bootstrap4.min.js"></script>
<div id="nam"></div>
<br>

<table id="tblfiles">
  <thead>
    <tr>
      <th>ID</th>
      <th>Name</th>
      <th>Country</th>
      <th>StDID</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>1</td>
      <td>pooe</td>
      <td>country1</td>
      <td>Sgyt13</td>
    </tr>
    <tr>
      <td>2</td>
      <td>AAA</td>
      <td>country2</td>
      <td>P5372</td>
    </tr>
    <tr>
      <td>3</td>
      <td>BBB</td>
      <td>country3</td>
      <td>P5972</td>
    </tr>
  </tbody>
</table>

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

Thatkookooguy · Accepted Answer · 2021-05-13 09:32:35Z

3

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(`<tr>
  <td>${ x }</td>
  <td>${ chance.name() }</td>
  <td>country${ x }</td>
  <td>${ chance.string({ length: 4, alpha: true, numeric: true }) }</td>
  </tr>`)
}
/* 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;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/chance/1.1.7/chance.min.js"></script>
<link href="https://cdn.datatables.net/1.10.24/css/dataTables.bootstrap4.min.css" rel="stylesheet" />
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.5.2/css/bootstrap.css" rel="stylesheet" />
<script src="https://code.jquery.com/jquery-3.3.1.js"></script>
<script src="https://cdn.datatables.net/1.10.19/js/jquery.dataTables.min.js"></script>
<script src="https://cdn.datatables.net/1.10.19/js/dataTables.bootstrap4.min.js"></script>
<div id="nam"></div>
<br>

<table id="tblfiles" class="table table-striped table-bordered" style="width:100%">
  <thead>
    <tr>
      <th>ID</th>
      <th>Name</th>
      <th>Country</th>
      <th>StDID</th>
    </tr>
  </thead>
  <tbody>
  </tbody>
</table>

edited May 13, 2021 at 9:32

answered May 11, 2021 at 9:28

Thatkookooguy

7,0521 gold badge36 silver badges60 bronze badges

Sign up to request clarification or add additional context in comments.

15 Comments

Gowri Lakshmi Over a year ago

So , this is working fine , but if i search like *.3 , it should retrieve country3 right , but it's not fetching that result

Gowri Lakshmi Over a year ago

and is there any way i can replace this .* with other special chars

Thatkookooguy Over a year ago

@GowriLakshmi *.3 is not the right syntax so it should not give you results. the correct one is .*3. and it should give you everything that ends with 3.

Thatkookooguy Over a year ago

@GowriLakshmi yes you can. you can do the same thing I did to replace , with | in the given search term. so, if you want users to just right an asterik * instead of .*, this is the way: this.value.toLowerCase().replace(',', '|').replace('*', '.*'). Just know that this might give you unexpected problems. you can break perfectly viable regex expressions by changing too much. Maybe the best thing is to create your own search language and translate that behind the scene to regex, but separate those layers completely.

Thatkookooguy Over a year ago

@GowriLakshmi I suggest you go over my code and try to understand it. I already did an API search in the answer I gave you by changing the search term and filtering the table accordingly. Take that example and change it as you please to create the syntax you want. You can pretty much override everything you want in the same function I use in my answer.

|

Collectives™ on Stack Overflow

Filter HTML Table using multiple values separated by Comma using JQuery

1 Answer 1

Using Regex Search

Exact Match

Using commas as delimiters

Examples (with Exact Match enabled)

15 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Using Regex Search

Exact Match

Using commas as delimiters

Examples (with Exact Match enabled)

15 Comments

Your Answer

Sign up or log in

Post as a guest

Related