Bootstrap datatable filters

Use grouped bootstrap toggle buttons to filter a datatable.

by Kevin Belanger

HTML

<script src="https://cdn.datatables.net/1.10.12/js/jquery.dataTables.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<div style="margin-left: 10px;">
<h3>
HTML:
</h3>
<div style="margin-left: 60px;">
  <label for="HtmlGridDisplayDead">Dead</label>
  <input type="radio" name="HtmlGridDisplay" id="HtmlGridDisplayDead" value="Dead" title="Non-functional, for visual comparison only" />
  <label for="HtmlGridDisplayAlive">Alive</label>
  <input type="radio" name="HtmlGridDisplay" id="HtmlGridDisplayAlive" value="Alive" title="Non-functional, for visual comparison only" />
  <label for="HtmlGridDisplayAll">All</label>
  <input type="radio" name="HtmlGridDisplay" id="HtmlGridDisplayAll" value="all" title="Non-functional, for visual comparison only" checked="checked" />
</div>

<h3>
Bootstrap btn-group 'toggle':
</h3>
<div id="record-filters" class="btn-group" data-toggle="buttons" style="margin-left: 60px; margin-top: 20px; margin-bottom: 20px">
  <label style="float:left; margin-right:10px;">Filter records:</label>
  <label id="gridDisplayDeadLabel" class="btn btn-primary">
    <input type="radio" name="GridDisplay" id="gridDisplayDead" autocomplete="off" value="Dead" /> Dead
  </label>
  <label id="gridDisplayAliveLabel" class="btn btn-primary">
    <input type="radio" name="GridDisplay" id="gridDisplayAlive" autocomplete="off" value="AliveOnly" /> Alive
  </label>
  <label id="gridDisplayAllLabel" class="btn btn-primary active">
    <input type="radio" name="GridDisplay" id="gridDisplayAll" autocomplete="off" value="all" /> All
  </label>
</div>
<table id="example" class="display" width="100%" cellspacing="0" style="margin-left: 30px; margin-top: 10px">
  <thead>
    <tr>
      <th>Name</th>
      <th>Age</th>
      <th>Condition</th>
    </tr>
  </thead>
  <tfoot>
    <tr>
      <th>Name</th>
      <th>Age</th>
      <th>Condition</th>
    </tr>
  </tfoot>
  <tbody>
    <tr>
      <td>Terry...

JavaScript

$(document).ready(function() {

  // define DataTable grid and bind to 'example' static HTML table
  var grid = $('#example').DataTable({
    "paging": false,
    "ordering": false,
    "info": false,
  });

  // Reload on radio button clicks
  $('[name="HtmlGridDisplay"]').click(function() {
    alert("HTML radio buttons are for display only, no filter was applied.");
  });

  // Reload on record filter radio button clicks 
  $(document).on("click", "#record-filters", function() {
    grid.draw();
  });
  
  var toggleActive = function(activate)
  {
     //return; // uncomment this line to see the de-coupled (broken) Bootstrap state
     
     // de-activate any existing selection
     $('#record-filters').find('.btn-primary').each(function(index, element) {
       $(element).removeClass('active');
     });
     activate.addClass('active');
  }

  $.fn.dataTable.ext.search.push(
    function(settings, data, dataIndex) {
      var dead = $('#gridDisplayDead')[0].checked;
      var alive = $('#gridDisplayAlive')[0].checked;
      var all = $('#gridDisplayAll')[0].checked;
      console.log("data[0]:" + data[0]);
      console.log("data[1]:" + data[1]);
      console.log("data[2]:" + data[2]);
      console.log("dead:" + dead);
      console.log("alive:" + alive);
      console.log("all:" + all);
      var condition = String(data[2]); // check condition
      if (all) {
         toggleActive($('#gridDisplayAllLabel'));
         console.log("all clicked");
         return true;
      } else if (dead) {
         toggleActive($('#gridDisplayDeadLabel'));
         console.log("dead clicked");
         return ("dead" == condition);
      } else if (alive) {
         toggleActive($('#gridDisplayAliveLabel'));      
         console.log("alive clicked");
         return ("dead" != condition);
      }
      return false;
    }
  );
});