Sorting gridview data using JQuery.
Lets learn how to bind data from sqlserver database to gridview and how to sort the bound data using JQuery plugin called as tablesorter which provides the functionality of sorting gridview data on client side.
In this article we are going to see how we can bind the data from sqlserver to gridview and how to sort the data in the GridView control using JQuery. There is a JQuery plugin named TableSorter which I will be using here. This will provide the functionality of sorting the data in the Gridview control at the client side.
Following would be the steps to bind and sort gridview data using JQuery TableSorter:
1.Create a New Website in Visual Studio.
2.Drag and Drop a GridView control and a SqlDataSource control in the Default.aspx page.
3. Configure the SqlDataSource to get the data from the database and assign this sqldatasource as datasource of the GridView as shown below. Here we are getting PKCourseId, CourseName columns from Course table and displaying it in the Grid View.
<div>
<asp:GridView ID="GridView1" runat="server" Width="20%" BorderWidth="1px" BorderStyle="Solid"
BorderColor="#DADADA" AutoGenerateColumns="False" Font-Names="Arial" Font-Size="9pt"
ForeColor="#333333"
DataKeyNames="PKCourseId" DataSourceID="SqlDataSource1">
<Columns>
<asp:BoundField DataField="PKCourseId" HeaderText="PKCourseId"
InsertVisible="False" ReadOnly="True" />
<asp:BoundField DataField="CourseName" HeaderText="CourseName"
/>
</Columns>
</asp:GridView>
<asp:SqlDataSource ID="SqlDataSource1" runat="server"
ConnectionString="<%$ ConnectionStrings:OnlineTestDBConnectionString %>"
SelectCommand="SELECT [PKCourseId], [CourseName] FROM [Course]">
</asp:SqlDataSource>
</div>
4.In the Page_Load event of the GridView write the below code to make the header of the GridView accessible.
protected void Page_Load(object sender, EventArgs e)
{
if (!IsPostBack)
{
GridView1.UseAccessibleHeader = true;
GridView1.HeaderRow.TableSection = TableRowSection.TableHeader;
}
}
5. We are going to use JQuery to sort the data in GridView. So Create a scripts folder in your website and add the following files.
1.jquery-1.4.3.min.js
2.jquery.tablesorter.min.js
You can download these files from the folder attached in this article.
6.In the head tag of Default.aspx page add the link to refer to the above files and add some styles for the Gridview as shown below. Here we are calling the tablesorter function on GridView to make the GridView sortable
<head runat="server">
<title></title>
<style type="text/css">
TH
{
text-align: left;
background-color:Gray;
color: black;
cursor: pointer;
font-weight: bold;
}
TD
{
border-bottom: #dadada 1px solid;
}
</style>
<script type="text/javascript" src="scripts/jquery-1.4.3.min.js"></script>
<script type="text/javascript" src="scripts/jquery.tablesorter.min.js"></script>
<script type="text/javascript">
$(document).ready(function () { $("#<%=GridView1.ClientID %>").tablesorter(); }); </script>
</head>
7. Run the default.aspx page and sort it. It sorts using JQuery.
Thus as you can see it is very easy to provide sorting functionality on client side using jquery.
Follow