To add column filter in DataTable you can go through my previous blog here. Now, we will move a step further and move column filter from footer to header.
Why do we need column filter in header?
If there are 50 to 100 records in a table then every time user needs to scroll down the page to use column filter. To make this more user friendly we can move column filter from footer to header.
DataTable is a jQuery plugin with advanced interaction controls to any HTML table. It is a highly flexible tool which provides pagination, multi-column ordering and instant search.
The DataTable search filter works for an entire table. But if you wish to add search filter for a particular column, then it’s also possible with a small tweak. Let’s take a look on adding column filter.