DataTables

DataTables exact match search on a comma separated field

by Digvijay Naruka

HTML

<link rel="stylesheet" href="//cdn.datatables.net/1.10.0/css/jquery.dataTables.css">
<script src="//cdn.datatables.net/1.10.0/js/jquery.dataTables.js"></script>
<table id="example">
  <thead>
    <tr>
      <th>id</th>
      <th>Versions Supported</th>
      <th>Rendering engine</th>
      <th>Browser</th>
      <th>Platform(s)</th>
      <th>Engine version</th>
      <th>CSS grade</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>1</td>
      <td>2,4</td>
      <td>Trident</td>
      <td>Internet Explorer 4.0</td>
      <td>Win 95+</td>
      <td> 4</td>
      <td>X</td>
    </tr>
    <tr>
      <td>2</td>
      <td>5,9</td>
      <td>Trident</td>
      <td>Internet Explorer 5.0</td>
      <td>Win 95+</td>
      <td>5</td>
      <td>C</td>
    </tr>
    <tr>
      <td>3</td>
      <td>3,7</td>
      <td>Trident</td>
      <td>Internet Explorer 5.5</td>
      <td>Win 95+</td>
      <td>5.5</td>
      <td>A</td>
    </tr>
    <tr>
      <td>4</td>
      <td>1</td>
      <td>Trident</td>
      <td>Internet Explorer 6</td>
      <td>Win 98+</td>
      <td>6</td>
      <td>A</td>
    </tr>
    <tr>
      <td>5</td>
      <td>8</td>
      <td>Trident</td>
      <td>Internet Explorer 7</td>
      <td>Win XP SP2+</td>
      <td>7</td>
      <td>A</td>
    </tr>
    <tr>
      <td>6</td>
      <td>10,11</td>
      <td>Trident</td>
      <td>AOL browser (AOL desktop)</td>
      <td>Win XP</td>
      <td>6</td>
      <td>A</td>
    </tr>
    <tr>
      <td>7</td>
      <td>14</td>
      <td>Gecko</td>
      <td>Firefox 1.0</td>
      <td>Win 98+ / OSX.2+</td>
      <td>1.7</td>
      <td>A</td>
    </tr>
    <tr>
      <td>8</td>
      <td>15</td>
      <td>Gecko</td>
      <td>Firefox 1.5</td>
      <td>Win 98+ / OSX.2+</td>
      <td>1.8</td>
      <td>A</td>
    </tr>
    <tr>
      <td>9</td>
      <td>16</td>
      <td>Gecko</td>
      <td>Firefox 2.0</td>
      <td>Win 98+ / OSX.2+</td>
      <td>1.8</td>
      <td>A</td>
    </tr>
    <tr>
      <td>10</td>
   ...

JavaScript

// NOTE:  Works only when comma separated values are unique across fields, as it takes the first one found. 

// This method requires to have a unique id for the filtering of the data.
var table = $('#example').DataTable();

$('#example_filter').prepend('<label>Version :<input type="search" id="versionSearch" class="form-control input-sm" placeholder="" aria-controls="customerTable"></label>')

$('input#versionSearch').on('keyup', function() {
  var val = $(this).val();
  var id = "";

  // Find indexes of rows which have `val` in the 1 column
  var indexes = table.rows().eq(0).filter(function(rowIdx) {

    return table.cell(rowIdx, 1).data().split(',').includes(val);
  });

  // Get the id of the field from the rows
  if (indexes && val) {

    // when data is in arrays
    id = table.rows(indexes).data()[0][0];
    // when data is in object
    //id = table.rows(indexes).data()[0].id;

  }

  if (val) {
    table.column(0).search('^' + id + "$", true, false).draw();
  } else {
    table.column(0).search("").draw();
  }
});