[Custom Filters] Apply Filter to Every Column in the HTML Table | Filter.js

HTML Table Custom Filters – A very small (less than 1 KB) table filter plugin to create a lookup field for every column in your HTML table which enables the user to filter through your tabular data in a convenient way.

Filters for each column separately for HTML tables using Javascript and Jquery.

Must Read: SVG Filters to Create a Morphing Text Effect JavaScript

How to make use of 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 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


Official Website(pspro0305): Click Here

This superior jQuery/javascript plugin is developed by pspro0305. For extra Advanced Usage, please go to the official website.

Related Posts


A Simple Searchable Select Dropdown Plugin | jQuery Select Search

Simple jQuery search on the selection options plugin for your website. Next, there is a checkbox replacement plugin that refines and beautifies the original selection element with…


A Quick jQuery-Based Country Picker With Flags | Country Select JS

Country Select JS is a jQuery plugin to select a country, based on the international phone input plugin. Adds a flag dropdown to any input, which lists…


Simple and Fast Autocomplete and Typeahead Javascript Library | autoComplete.js

autoComplete.js is a simple, pure, and incrementally designed JavaScript library for speed, high versatility, and seamless integration with a wide variety of projects and systems. Features Pure…


Bootstrap Notification Message Alert Plugin with jQuery

BootstrapMsg is a jQuery plugin for displaying messages with Bootstrap alert classes to generate hierarchical in-page navigation for an extended webpage sectioned by heading components. Using Bootstrap…


jQuery Plugin for Transforming HTML Tables Into Charts Using Google Charts

Chartinator is a jQuery plugin for converting HTML tables, Google Sheets and js arrays into charts using Google Charts. Use data from HTML tables Chartinator is designed…


Customizable & Composable Charts for VueJS | vue-wcharts

WCharts is a library that makes it easy to create your own charts using Vuejs. You can easily create reusable chart components. Use a basic layout or…