Filter GridView Using tablesorter_filter plugin in ASP.NET

Introduction: Hey guys in the previous article i have explained how we can sort gridview and paginate gridview in asp.net at client side without making any postback to server using very small jQuery plugins for table sorting paging, filter. In this article i am going to explain how we can implement the filtering of records based on any column or group of columns either in a table or girdView. You can download each of these plugins by clicking here.

Description:  Follow the simple steps as described below to implement this feature in you asp.net application.

1. First of all download all these java scripts by clicking on the links above.

2.  Put references of all these in the header section like this.

<script src=”Scripts/jquery-1.4.1.min.js” type=”text/javascript”></script>
<script src=”Scripts/jquery.tablesorter-2.0.4.js” type=”text/javascript”></script>
<script src=”Scripts/jquery.tablesorter.pager.js” type=”text/javascript”></script>
<script src=”Scripts/tablesorter_filter.js” type=”text/javascript”></script>

3. Put references of table sorter stylesheet along with other css files in the <style> tag in the heading section.

<link href=”styles/style.css” rel=”stylesheet” type=”text/css” />
<link href=”styles/jquery.tablesorter.pager.css” rel=”stylesheet” type=”text/css” />

4. Now drag and drop a GridView from the toolbar in the form assign the cssClass=”tablesorter” .

5.  If you want to implement paging features then write following lines of code.

<div id=”pagerOne”>
<div colspan=”7″ style=”border-right: solid 3px #7f7f7f;”>
<img src=”styles/first.gif” class=”first” />
<img src=”styles/prev.gif” class=”prev” />
<input type=”text” class=”pagedisplay” />
<img src=”styles/next.gif” class=”next” />
<img src=”styles/last.gif” class=”last” />
<select class=”pagesize”>
<option selected=”selected” value=”10″>10</option>
<option value=”20″>20</option>
<option value=”30″>30</option>
<option value=”40″>40</option>
</select>
</div>
</div>

6.  At the top of form or anywhere drag and drop a textbox and assign an id to textbox.

7.In between <script> tag when the document is ready write following lines of code to filter the records to filter the records in the gridview or table

<script type=”text/javascript”>
$(document).ready(function () {
$(“#GridView1”).tablesorter({ debug: false, sortList: [[0, 0]], widgets: [‘zebra’] })
.tablesorterPager({ container: $(“#pagerOne”), positionFixed: false })
.tablesorterFilter({ filterContainer: $(“#txtSearch”), filterColumns: [1, 2, 3, 4, 5, 6, 7], filterCaseSensitive: false
});
});
</script>

8. In the above line of code “GridView1” is the id of GridView/table and “txtSearch” is the id of TextBox where we type value to filter records.

9. Now enjoy the new feature by browsing the web page in browser.

Demo: 

Quick Search In GridView

Quick Search In GridView

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s