Apply Filter To Each Column Of An HTML Table - Filter.js

A super tiny (less than 1kb) table filtering plugin to generate a search field for each column of your HTML table that enables the user to filter through your tabular data in a convenient way.

How to use 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>Prakhar</td>
      <td>Srivastava</td>
      <td>@Prakhar</td>
    </tr>
    <tr>
      <td>2</td>
      <td>Rahul</td>
      <td>Singh</td>
      <td>@Rahul</td>
    </tr>
    <tr>
      <td>3</td>
      <td>Ankit</td>
      <td>Mishra</td>
      <td>@Ankit</td>
    </tr>
  </tbody>
</table>

2. Load the main script Filter.js after loading the latest jQuery library.

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

3. Load the necessary stylesheet when needed.

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

4. Add a rows counter to the bottom of the table. OPTIONAL.

No.of Rows : <span id="rowcount"></span>

Changelog:

2020-09-08

• Update Filter.js

2020-09-08

• Update Filter.js
• Added Rows count.

---

This awesome jQuery plugin is developed by pspro0305. For more Advanced Usages, please check the demo page or visit the official website.