Sorting is very much needed while working
with Gridview. We can sort data using code in code behind file and also using
Jquery.
Create a table:
Click on Image to Enlarge View
Now add a simple webform in your application. Add following jquery CDN and Jquery code to head section of HTML markup.
Jquery Script:
<script src="https://code.jquery.com/jquery-2.2.3.min.js"></script>
<%--CDN for TableSorter
Plugin --%>
<script src='https://cdnjs.cloudflare.com/ajax/libs/jquery.tablesorter/2.26.0/js/jquery.tablesorter.js' type="text/javascript"></script>
<script>
$(document).ready(function () {
$("#grdIcon").tablesorter();
});
</script>
Now add a Gridview and bind it to database
and Wrtie code in code behind file to show table header and body.
Design Page:
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
<script src="https://code.jquery.com/jquery-2.2.3.min.js"></script>
<%--CDN for TableSorter
Plugin --%>
<script src='https://cdnjs.cloudflare.com/ajax/libs/jquery.tablesorter/2.26.0/js/jquery.tablesorter.js' type="text/javascript"></script>
<script>
$(document).ready(function () {
$("#grdIcon").tablesorter();
});
</script>
</head>
<body>
<form id="form1" runat="server">
<div>
<asp:GridView ID="grdIcon" runat="server" AutoGenerateColumns="False"
CellPadding="3" Width="400px" BackColor="White" BorderColor="#CCCCCC" BorderStyle="None" BorderWidth="1px" >
<Columns>
<asp:BoundField DataField="Article" SortExpression="Article" HeaderText="Article" />
<asp:BoundField DataField="Note" SortExpression="Note" HeaderText="Note" />
<asp:BoundField DataField="File_Name" SortExpression="File_Name" HeaderText="File Name" />
</Columns>
<FooterStyle BackColor="White" ForeColor="#000066" />
<HeaderStyle BackColor="#006699" Font-Bold="True" ForeColor="White" />
<PagerStyle BackColor="White" ForeColor="#000066" HorizontalAlign="Left" />
<RowStyle ForeColor="#000066" />
<SelectedRowStyle BackColor="#669999" Font-Bold="True" ForeColor="White" />
<SortedAscendingCellStyle BackColor="#F1F1F1" />
<SortedAscendingHeaderStyle BackColor="#007DBB" />
<SortedDescendingCellStyle BackColor="#CAC9C9" />
<SortedDescendingHeaderStyle BackColor="#00547E" />
</asp:GridView>
</div>
</form>
</body>
</html>
Code Behind File using C#:
Add Folllowing Namespaces:
using System.Configuration;
using System.Data.SqlClient;
using System.Data;
Write following code to Bind Gridview:
SqlConnection con = new SqlConnection(ConfigurationManager.ConnectionStrings["con"].ToString());
DataTable dt;
protected void Page_Load(object sender, EventArgs e)
{
if (!IsPostBack)
{
FillGrid();
}
}
public void FillGrid()
{
try
{
SqlDataAdapter adp = new SqlDataAdapter("Select * from
File_Attachment", con);
dt = new DataTable();
adp.Fill(dt);
if (dt.Rows.Count
> 0)
{
grdIcon.DataSource = dt;
grdIcon.DataBind();
// enable the
gridview to display the thead and tbody
grdIcon.UseAccessibleHeader = true;
grdIcon.HeaderRow.TableSection = TableRowSection.TableHeader;
}
}
catch (Exception ex)
{
}
}
