Displaying tabular data with search functionality is one of the most common requirements we develop in any web applications. Almost in all applications, the search filters are always applied in server and only the filtered data is sent to the client browser for displaying. There are situations where we may need to search or filter data in client side when the page displays a bulk tabular data. With jQuery, we can easily build our own client side search but still it requires considerable amount of time and testing. In this article, we will use a jQuery plugin called jQuery.FilterTable that helps us to easily filter tabular data in client side.
Read Sorting Table or Grid in Client Side Using jQuery in Asp.Net MVC to sort table data in client side using jQuery.
I will create a new Asp.Net MVC 5.0 empty project to demonstrate jQuery filter plugin in this article. I will use a simple Employee-Department model with Entity Framework Code First for creating a tabular data. Complete source code is attached at the bottom of this article for reference.
First, let’s download the table filter plugin from here and integrate it into our MVC application. Unzip the plugin and copy jquery.filtertable.min.js into our project Scripts folder like below,
You also need the latest version of jQuery, download it from the jQuery official site or add it through Nuget package manager. I have already included jQuery and it is linked from layout page.
Let us first build a view to display a list of employees from Employee table. The View and Controller Action method code below,
GetAllEmployeeData.cshtml
@model IEnumerable<GridDemo.Models.Employee>
@{
ViewBag.Title = "Index";
Layout = "~/Views/Shared/_Layout.cshtml";
}
<h2>MVC Grid</h2>
<div>
@Html.ActionLink("Index", "Index")
</div>
<div>
<table id="EmployeeList" class="table table-bordered table-condensed">
<thead>
<tr>
<th>Id</th>
<th>First Name</th>
<th>Last Name</th>
<th>Address1</th>
<th>City</th>
<th>State</th>
<th>Country</th>
<th>Postal Code</th>
<th>Salary</th>
<th>Email</th>
<th>Date of Birth</th>
<th>Department</th>
</tr>
</thead>
<tbody>
@foreach (Employee emp in Model)
{
<tr>
<td>@emp.EmployeeId</td>
<td>@emp.FirstName</td>
<td>@emp.LastName</td>
<td>@emp.Address1</td>
<td>@emp.City</td>
<td>@emp.State</td>
<td>@emp.Country</td>
<td>@emp.PostalCode</td>
<td>
@if(@emp.Country == "UK")
{
@String.Format(new System.Globalization.CultureInfo("en-GB", false),"{0:C}",emp.Salary)
}
else
{
@String.Format("{0:C}",emp.Salary)
}
</td>
<td>@emp.Email</td>
<td>@emp.DOB</td>
<td>@emp.Department.DepartmentName</td>
</tr>
}
</tbody>
</table>
</div>
Action method
public ActionResult GetAllEmployeeData()
{
return View(db.Employees.Include("Department").OrderBy(e => e.EmployeeId));
}
Integrating jQuery.FilterTable Plugin
Now, let’s add filtering using jQuery.FilterTable plugin in our GetAllEmployeeData view. Link the plugin script file that we copied into the solution into the script section of the view. To enable filtering, we just need to call filterTable() method on employee list table. Also as mentioned in plugin site, let’s add the default styles for search text highlighting in styles section.
@section css {
<style>
.filter-table .quick {
margin-left: 0.5em;
font-size: 0.8em;
text-decoration: none;
}
.fitler-table .quick:hover {
text-decoration: underline;
}
td.alt {
background-color: #ffc;
background-color: rgba(255, 255, 0, 0.2);
}
</style>
}
@section scripts {
<script src="@Url.Content("~/Scripts/filtertable/jquery.filtertable.min.js")" type="text/javascript"> </script>
<script type="text/javascript">
$(document).ready(function () {
$('#EmployeeList').filterTable();
});
</script>
}
In _Layout page, I have declared 2 sections using @RenderSection helper methods, one for css and scripts to include stylesheets and scripts from the content view.
Execute the application and you can see a filter textbox added by the plugin at top of the table like below.
You can enter a search text to filter. For example, type “London” and you would see the table get filtered like below,
Customizing FilterTable Plugin
The FilterTable plugin takes an options object as parameter to customize the plugin. Let’s see some basic customization options of FilterTable plugin in the next sections.
Adding Quick List Filter Items for Quick Search
The options object takes a list of filter string for displaying quick search list using quickList property. For example, to add quick search for search string US, UK.
<script type="text/javascript">
$(document).ready(function () {
$('#EmployeeList').filterTable({
quickList: [
'US',
'UK'
],
quickListClear: '× clear filter'
});
});
</script>
On execution, we will see the quick search query listed as links next to search text box as below. Clicking the search string links will filter the table.
Clicking “x clear filter” will clear the filters.
Disabling Search for Certain columns
To disable filter on specific columns we need to the pass the column index through ignoreColumns property of options object like below,
<script type="text/javascript">
$(document).ready(function () {
$('#EmployeeList').filterTable({
ignoreColumns: [1, 2]
});
});
</script>
When executed, the filter will not work for First Name and Last Name columns.
Search/Filter Based on Columns
The previous section helped us to exclude columns using ignoreColumns property. The plugin also provides an alternate way where we can set a css class to exclude a column value from getting filtered. For example, adding a css class class="no-filter" to a td and passing the options object { ignoreClass: 'no-filter' } will prevent all columns with the css class from getting filtered. Let’s use this property to search the table based on a column we select using a dropdown list like below.
When we select a column name in the dropdown, the search plugin will look for match only on the selected column values as seen above. Script below,
<div class="col-md-1">
<select id="ddlFilterColumns" class="form-control input-sm">
<option value="">All Columns</option>
<option value="0">Id</option>
<option value="1">First Name</option>
<option value="2">Last Name</option>
<option value="3">Address1</option>
<option value="4">City</option>
<option value="5">State</option>
<option value="6">Country</option>
<option value="7">Postal Code</option>
<option value="8">Salary</option>
<option value="9">Email</option>
<option value="10">Date of Birth</option>
<option value="11">Department</option>
</select>
</div>
<div class="col-md-11">
</div>
<div id="dvTable">
<table id="EmployeeList" class="table table-bordered table-condensed">
<!-- Removed for brevity -->
</table>
</div>
<script type="text/javascript">
$(document).ready(function () {
$('#EmployeeList').filterTable({ ignoreClass: 'no-filter' });
$('#ddlFilterColumns').change(function () {
var index = $(this).val();
if (index == "")
$('#EmployeeList td').removeClass('no-filter');
else {
$('#EmployeeList>tbody>tr>td').addClass('no-filter');
$('#EmployeeList>tbody>tr').each(function () {
$('td:eq(' + index + ')', this).removeClass('no-filter');
});
}
});
});
</script>
For simplicity, I have hard-coded the column names to display in the dropdown list. You can build it from the model object.
Note – By default, the filter plugin work only when the table row count is greater than 8. You can modify this value by passing a options object {minRows:1} to filterTable() method. Setting it to 1 will enable search to work even when the table has 1 row.
Refer official site here for more customization options for the jQuery FilterTable plugin.
Download the source and see it in action!