JSFiddle - React, Tailwind, and code Playground

by Zakaria Acharki

HTML

<form method="post" action="/students/delete/attendance">

  <input type="hidden" name="_token" value="pGRXX9H599o2yT12n8XXCZLwG5mtVrJeHiDnWNmx">

  <input type="hidden" name="_method" value="delete">


  <div class="form-group d-flex">
    <select name="checkBoxArray" class="form-control bg-dark text-white"> 

<option value="">Delete</option> 

</select>
    <input type="submit" name="delete_all" class="btn btn-primary mx-2">
  </div>


  <div class="filterable">

    <div class="float-right mb-2">
      <button type="button" id="search" class="btn btn-danger px-4 btn-xs btn-filter"><span class="fas fa-search"></span> Search Students</button>
    </div>

    <div class="py-2">

      <table border=1 id="studentsData" class="table table-striped table-bordered">
        <tr class="filters">
          <th style="width: 2%" class="align-middle text-center"><input type="checkbox" id="options"></th>
          <th style="width: 2%" class="align-middle text-center">#</th>
          <th style="width: 15%" class="text-center">Student ID<input type="text" class="form-control"></th>
          <th style="width: 15%" class="text-center">Student Name<input type="text" class="form-control"></th>
          <th style="width: 15%" class="text-center">Attendance<input type="text" class="form-control"></th>
          <th style="width: 15%" class="text-center">Date<input type="text" class="form-control"></th>
          <th style="width: 15%;" class="align-middle text-center">Actions</th>
        </tr>
        <tr></tr>
        <tr>
          <td><input class="checkBoxes" type="checkbox" name="checkBoxArray[]" value="35"></td>
          <td><input type="hidden" value="35" name="id[]">35</td>
          <td><input type="hidden" value="hk11" name="student_id[]">hk11</td>
          <td><input type="hidden" value="hasnain" name="first_name[]"><input type="hidden" value="khan" name="last_name[]">hasnain khan</td>
          <td><input type="hidden" value="Present"...

JavaScript

var body = $('body');

body.on('click', '.filterable .btn-filter', function() {
  var $panel = $(this).parents('.filterable'),
    $filters = $panel.find('.filters input'),
    $tbody = $panel.find('.table tbody');
  if ($filters.prop('disabled') == true) {
    $filters.prop('disabled', false);
    $filters.first().focus();
  } else {
    $filters.val('').prop('disabled', true);
    $tbody.find('.no-result').remove();
    $tbody.find('tr').show();
  }
});

body.on('input', '.filterable .filters input', function(e) {
  /* Ignore tab key */
  var code = e.keyCode || e.which;
  if (code == '9') return;
  /* Useful DOM data and selectors */
  
  var $input = $(this),
    inputContent = $input.val().toLowerCase(),
    $panel = $input.parents('.filterable'),
    column = $panel.find('.filters th').index($input.parents('th')),
    $table = $panel.find('.table'),
    $rows = $table.find('tbody tr');
  /* Dirtiest filter function ever ;) */
  var $filteredRows = $rows.filter(function() {
    var value = $(this).find('td').eq(column).text().toLowerCase();
    return value.indexOf(inputContent) === -1;
  });
  /* Clean previous no-result if exist */
  $table.find('tbody .no-result').remove();
  /* Show all rows, hide filtered ones (never do that outside of a demo ! xD) */
  $rows.show();
  $filteredRows.hide();
  /* Prepend no-result row if all rows are filtered */
  if ($filteredRows.length === $rows.length) {
    $table.find('tbody').prepend($('<tr class="no-result text-center"><td colspan="' + $table.find('.filters th').length + '">No Result Found</td></tr>'));
  }
  $panel.find('.filters').show();
});