JSFiddle - React, Tailwind, and code Playground

by ergec

HTML

<link rel="stylesheet" href="//cdn.datatables.net/1.10.12/css/jquery.dataTables.css">
<script src="//cdn.datatables.net/1.10.12/js/jquery.dataTables.js"></script>
<script src="https://rawgit.com/vedmack/yadcf/master/src/jquery.dataTables.yadcf.js"></script>
Col 1:
<select class="colfiltering" data-colnumber="0">
  <option value="">No</option>
  <option value="1">Yes</option>
</select>
Col 2:
<select class="colfiltering" data-colnumber="1">
  <option value="">No</option>
  <option value="1">Yes</option>
</select>
<button id="inityadcf">
  Apply Filters To Table
</button>
<br>
<br>
<br>
<table id="table_id" class="display">
  <thead>
    <tr>
      <th>Column 1</th>
      <th>Column 2</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Row 1</td>
      <td>2</td>
    </tr>
    <tr>
      <td>Row 2</td>
      <td>1</td>
    </tr>
    <tr>
      <td>Row 1</td>
      <td>10</td>
    </tr>
  </tbody>
</table>

JavaScript

/*
http://stackoverflow.com/questions/40661069/dynamic-user-selectable-filter-for-datatable
*/
var myTable = $('#table_id');
myTable.DataTable();
$("#inityadcf").click(function() {
  var colfiltering = [];
  $(".colfiltering").each(function() {
    var $that = $(this);
    if ($that.val()) {
      colfiltering.push({
        column_number: $that.data("colnumber")
      });
    }
  });
  myTable.DataTable().destroy();
  yadcf.init(myTable.DataTable(), colfiltering);
});