Jquery DataTables plugin allows you to search through all the columns and it works pretty well. Now if you want to add a column-wise filter, you need to use the JQuery DataTables Column Filter plugin.
To extend JQuery DataTables with Column Filter plugin, you need to have code like below:
<asp:Repeater ID="repUserTempAssignment" runat="server" DataSourceID="SqlDataSource1"
EnableViewState="false">
<HeaderTemplate>
<table class="table-data" id="tblEmployee" style="width: 100%px;">
<thead>
<tr>
<th>
First Name
</th>
<th>
Last Name
</th>
<th>
City
</th>
<th>
Country
</th>
</tr>
<tr>
<th>
First Name
</th>
<th>
Last Name
</th>
<th>
City
</th>
<th>
Country
</th>
</tr>
</thead>
<tbody>
</HeaderTemplate>
<ItemTemplate>
<tr>
<td>
<%# Eval("FirstName") %>
</td>
<td>
<%# Eval("LastName") %>
</td>
<td>
<%# Eval("City") %>
</td>
<td>
<%# Eval("Country") %>
</td>
</tr>
</ItemTemplate>
<FooterTemplate>
</tbody><tfoot>
</tfoot>
</table>
</FooterTemplate>
</asp:Repeater>
I’m using asp.net repeater control to bind the employee list. If you notice in the above code table has two rows in the header. One will work as a table header and one will be replaced with textboxes at runtime which will work as a column filter. For that you need below script:
$('#tblEmployee').dataTable(
{
"bSortCellsTop": true
}).columnFilter(
{
sPlaceHolder: "head:after"
});
bSortCellsTop: This will apply sorting on the first row of the header.
sPlaceHolder: It will add text boxes in the second row of the header for every column. If you omit this, there won’t be any filters applied to columns.
After adding the above code, the table will look like below:
Now to get rid of global search filter you need to add below code in dataTable settings:
"sDom": '<"top"l>rt<"bottom"ip><"clear">'
sDom: It allows you to specify exactly where in the DOM you want DataTables to inject the various controls it adds to the page.
If you’ve not looked into the documentation and if you google for a quick solution, you might find may solutions stating to use bFilter, but it simply enables/disable the filtering capability of dataTable. If one doesn’t want to use the default styling of dataTable and wants to apply his own classes, bSortClasses needs to be used. Final code would be:
$(document).ready(function () {
$('#tblEmployee').dataTable(
{
"bSortCellsTop": true,
"sDom": '<"top"l>rt<"bottom"ip><"clear">',
"bFilter": false,
"bSortClasses": false
}).columnFilter(
{
sPlaceHolder: "head:after"
});
});
Using above code, global filter won’t be added to page as shown below:
I hope it helps!
Leave a Reply