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

Apply Filter To Each Column Of An HTML Table - Filter.js
File Size: 3.24 KB
Views Total: 1678
Last Update:
Publish Date:
Official Website: Go to website
License: MIT
   

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

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.