Inline Filter for Basic Grid using Mustachejs

In my previous article we create a filter which looks through each column and display records which match the pattern. In this article we will take it a step further and provide filter text boxes to each of the column headers which filters the data based on the text entered to specific column filters

HTML Code

Define the template for the Grid to be displayed

The container table where the rows will be inserted.

JS Code

Code for fetching the data via WebApi and binding the table.

Binding the Filter text boxes and filter icons to the header row of the table by calling the bindFilterEvents function

The SearchGrid function will be called every time there is change in the filter text box