DataTable.net

by eyk107

HTML

<link rel="stylesheet" href="https://cdn.datatables.net/r/dt/jq-2.1.4,dt-1.10.9,b-1.0.3,b-flash-1.0.3/datatables.min.css">
<script src="https://cdn.datatables.net/r/dt/jq-2.1.4,dt-1.10.9,b-1.0.3,b-flash-1.0.3/datatables.min.js"></script>
<table id="datatable" class="table table-striped table-list">
  <thead class="thead-light">
    <tr role="row">
      <th scope="col" class="sorting" tabindex="0" aria-controls="DataTables_Table_0" rowspan="1" colspan="1" style="width: 47px;" aria-label="ID: activate to sort column ascending" width="10%">ID</th>
      <th scope="col" class="sorting" tabindex="0" aria-controls="DataTables_Table_0" rowspan="1" colspan="1" style="width: 314px;" aria-label="Bedrijf: activate to sort column ascending" width="40%">Bedrijf</th>
      <th scope="col" class="sorting" tabindex="0" aria-controls="DataTables_Table_0" rowspan="1" colspan="1" style="width: 314px;" aria-label="Datum: activate to sort column ascending" width="40%">Datum</th>
      <th scope="col" class="sorting" tabindex="0" aria-controls="DataTables_Table_0" rowspan="1" colspan="1" style="width: 49px;" aria-label="Status: activate to sort column ascending" width="10%">Status</th>
    </tr>
  </thead>
  <tbody>
    <tr class="align-middle regist odd" id="148" role="row">

      <td>148</td>
      <td id="name">h</td>
      <td id="date">2019-01-28 09:42:23</td>
      <td id="status"><i class="fas fa-star text-success" data-toggle="tooltip" data-placement="top" title="star" data-original-title="Nieuwe inschrijving!"></i></td>
    </tr>
    <tr class="align-middle regist even" id="149" role="row">

      <td>149</td>
      <td id="name">g</td>
      <td id="date">2019-01-28 09:46:04</td>
      <td id="status"><i class="fas fa-star text-success" data-toggle="tooltip" data-placement="top" title="star" data-original-title="Nieuwe inschrijving!"></i></td>
    </tr>
    <tr class="align-middle regist odd" id="150" role="row">

      <td>150</td>
      <td id="name">h</td>
      <td...

JavaScript

$(document).ready(function() {
  $('#datatable thead tr').clone(true).appendTo('#datatable thead');
  $('#datatable').DataTable({
    order: [
      [1, 'asc']
    ],
    lengthMenu: [
      [25, 50, -1],
      [25, 50, "All"]
    ],
    orderCellsTop: true,
    fixedColumns: true,
    columnDefs: [{
      targets: 'no-sort',
      orderable: false,
      searchable: false,
    }],
    initComplete: function() {
      this.api().columns([2, 3]).every(function() {
        var column = this;
        var select = $('<select class="selectbox"><option value=""></option></select>')
          .appendTo($("#datatable thead tr:eq(1) th").eq(column.index(i)).empty())
          .on('change', function() {
            var val = $.fn.dataTable.util.escapeRegex(
              $(this).val()
            );

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

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

      this.api().columns([0, 1]).every(function() {
        var that = this;
        var column = this;
        var title = $(this).text();
        var input = $('<input type="text" class="textbox" placeholder="Search ' + title + '" />')
          .appendTo($("#datatable thead tr:eq(1) th").eq(column.index(i)).empty())

          .on('keyup change', function() {
            if (that.search() !== this.value) {
              that
                .search(this.value)
                .draw();
            }
          });
      });
    }
  });
});