CODEWITHSUNDEEP
javascripthtmljquery
Gowri Lakshmi
Gowri Lakshmi

Reputation: 65

Filter HTML Table using multiple values separated by Comma using JQuery

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.

ImageofJSfiddle

So here it replaces the first % but not the second

Upvotes: 2

Views: 1220

Answers (1)

Thatkookooguy
Thatkookooguy

Reputation: 7012

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>

Upvotes: 3

Related Questions