JSFiddle - React, Tailwind, and code Playground

by qunzorez

HTML

<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/1.10.22/css/jquery.dataTables.css">
<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/searchpanes/1.2.0/css/searchPanes.dataTables.min.css">
<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/select/1.3.1/css/select.dataTables.min.css">

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script type="text/javascript" charset="utf8" src="https://cdn.datatables.net/1.10.22/js/jquery.dataTables.js"></script>
<script type="text/javascript" charset="utf8" src="https://cdn.datatables.net/searchpanes/1.2.0/js/dataTables.searchPanes.min.js"></script>
<script type="text/javascript" charset="utf8" src="https://cdn.datatables.net/select/1.3.1/js/dataTables.select.min.js"></script>
<script type="text/javascript" charset="utf8" src="https://cdn.datatables.net/scroller/2.0.3/js/dataTables.scroller.min.js"></script>

<div class="content-container">
  <h2 class="head-of-editor">Filtering settings:</h2>
  <div class="checkBoxes"></div>
  <br />
  <a class="button button-clear" id="createFilter" href="#">Create filter</a><br><br>
</div>

<table class="custom-style" id="test1">
  <thead class="table-head">
    <tr>
    <th class="checkbox-mark">
                                <input type="checkbox" class="custom-checkbox" id="checkAll"/>
                            </th>
      <th>Station code</th>
      <th>Station name</th>
      <th>Station type</th>
      <th>Description</th>
      <th>Belongs to production resource(s)</th>
      <th>Main production resource</th>
      <th></th>
    </tr>
  </thead>
  <tbody class="table-body">
    <tr>
    <td>
                                    <input type="checkbox" class="custom-checkbox checkbox-mark"/>
                                </td>
      <td id="code_1" class="col-2">
        <span class="float-left">
          <em class="fa fa-eye pointer fa-visible"...

JavaScript

addSpliting('');

function addSpliting(val) {

  if (val != '') {

    $("#test1").DataTable({
      destroy: true,
      searchPanes: {
        layout: 'columns-4',
      },
      columnDefs: [{
        searchPanes: {
          show: true,
        },
        targets: '_all'
      }],
      dom: 'Pfrtip'
    });
    $('.dtsp-searchPanes').children().each(function(i, obj) {
      if (!val.includes(i)) $(this).hide();
      else $(this).show();
    });
  } else {
    $("#test1").DataTable({
      destroy: true
    });
  }

}

function setFilters() {

  $("table thead tr th").each(function(index) {

    var boxes = `<label>
                <input type="checkbox" class="checkbox" id="${index}"/>
                ${$(this).text()}
                </label>`
    if ($(this).text() != "") $(".checkBoxes").append(boxes);
  });
}

setFilters();


$("#createFilter").on("click", function() {
  var columFilters = [];

  $('.checkbox:checked').each(function() {
    columFilters.push(parseInt($(this).attr('id')));
  });

  addSpliting(columFilters);
});

$('#checkAll').click(function() {
  debugger;
  var allPages = $("#test1").DataTable().cells().nodes();
  $(allPages).find('input[type="checkbox"]').prop('checked', this.checked);
});