How to make use of it:

1. Add filters to your HTML tables’ header columns as follows:

<table class="table">
  <thead>
    <tr class="filters">
      <th><input type="text" placeholder="#" disabled></th>
      <th><input type="text" placeholder="First Name" disabled></th>
      <th><input type="text" placeholder="Last Name" disabled></th>
      <th><input type="text" placeholder="Username" disabled></th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>1</td>
      <td>John</td>
      <td>Cena</td>
      <td>@johncena</td>
    </tr>
    <tr>
      <td>2</td>
      <td>Steve</td>
      <td>Smith</td>
      <td>@stevesmith</td>
    </tr>
    <tr>
      <td>3</td>
      <td>Jack</td>
      <td>Ryan</td>
      <td>@jackryan</td>
    </tr>
  </tbody>
</table>

2. Load the script Filter.js after loading the most recent jQuery library.

<script src="/path/to/cdn/jquery.min.js"></script>
<script src="/path/to/filter.js"></script>

3. Load the required stylesheet.

<link href="filter.css" rel="stylesheet" />

4. Add a row counter to the bottom of the table.

<span id="rowcount"></span>

See Demo And Download