Datatable Filters - Dropdown

by Mohammad Gouse

HTML

<script src="https://cdn.datatables.net/1.10.9/js/jquery.dataTables.min.js"></script>
<link rel="stylesheet" href="https://cdn.datatables.net/1.10.9/css/jquery.dataTables.min.css">
<table id="example" class="display" cellspacing="0" width="100%">
  <thead>
    <tr>
      <th>Status</th>
      <th>Project</th>
      <th>Region</th>
      <th>Unit Name</th>
      <th>Days of First Fire</th>
      <th>First Fire date</th>
      <th>Action</th>
    </tr>
    <tr id="filters">
      <th></th>
      <th></th>
      <th></th>
      <th></th>
      <th></th>
      <th></th>
      <th></th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td><span style="color: #fff;padding: 3px;border: 1px solid red;background: red;">InComplete</span></td>
      <td>Alba</td>
      <td>Asia</td>
      <td>Unit 1</td>
      <td>61</td>
      <td>Sep/01/2018</td>
      <td> </td>
    </tr>
    <tr>
      <td> <span style="color: #6d5760;padding: 3px;border: 1px solid yellow;background: yellow;">Release</span></tc>
        <td>Alba</td>
        <td>America</td>
        <td>Unit 1</td>
        <td>63</td>
        <td>Sep/01/2018</td>
        <td></td>
    </tr>
    <tr>
      <td><span style="color: #fff;padding: 3px;border: 1px solid #3fb618;background: #3fb618;">First Fire</span></td>
      <td>Asset</td>
      <td>San Francisco</td>
      <td>Unit 2</td>
      <td>66</td>
      <td>Apr/01/2018</td>
      <td></td>
    </tr>
    <tr>
      <td><span style="color: #fff;padding: 3px;border: 1px solid #3fb618;background: #3fb618;">First Fire</span></td>
      <td>Alba</td>
      <td>Middle East</td>
      <td>Unit 2</td>
      <td>41</td>
      <td>Sep/01/2018</td>
      <td></td>
    </tr>
    <tr>
      <td><span style="color: #fff;padding: 3px;border: 1px solid #3fb618;background: #3fb618;">First Fire</span></td>
      <td>Alba</td>
      <td>Asia</td>
      <td>Unit 2</td>
      <td>35</td>
      <td>Jun/01/2018</td>
      <td></td>
    </tr>
    <tr>
      <td><span style="color:...

JavaScript

$(document).ready(function() {
  $('#example').DataTable({
    initComplete: function() {



      this.api().columns().every(function() {
        var column = this;

        if (column.index() == 0) {

          input = $('<input type="text" />').appendTo($(column.header())).on('keyup change', function() {
            if (column.search() !== this.value) {
              column.search(this.value)
                .draw();
            }
          });
          return;
        }

        var select = $('<select><option value=""></option></select>')
          .appendTo($("#filters").find("th").eq(column.index()))
          .on('change', function() {
            var val = $.fn.dataTable.util.escapeRegex(
              $(this).val());

            column.search(val ? '^' + val + '$' : '', true, false)
              .draw();
          });

        console.log(select);

        column.data().unique().sort().each(function(d, j) {
          select.append('<option value="' + d + '">' + d + '</option>')
        });
      });
    }
  });

  console.log()
});