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

File Size: 3.24 KB
Views Total: 32200
Last Update:
Publish Date:
Official Website: Go to website
License: MIT
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">
    <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>

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>




  • 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.