1. 前台代码
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
<script src="../../Scripts/jquery-1.10.2.js"></script>
<script src="../../Scripts/jquery.tablesorter.min.js"></script>
<script type="text/javascript">
$(document).ready(function () {
$("#GridView2").tablesorter();
});
</script>
<style type="text/css">
th {
cursor: pointer;
background-color: #dadada;
color: Black;
font-weight: bold;
text-align: left;
}
</style> </head>
<body>
<form id="form1" runat="server">
<div>
<asp:GridView ID="GridView2" CellPadding="" runat="server" AutoGenerateColumns="false">
<Columns>
<asp:BoundField DataField="Item" HeaderText="Item" />
<asp:BoundField DataField="Price" HeaderText="Price" />
</Columns>
</asp:GridView>
</div>
</form>
</body>
</html>
2. 后台代码
protected void Page_Load(object sender, EventArgs e)
{
if (!IsPostBack)
{
DataTable dt = new DataTable();
dt.Columns.AddRange(new DataColumn[] { new DataColumn("Item"), new DataColumn("Price") });
dt.Rows.Add("AItem", );
dt.Rows.Add("BItem", );
dt.Rows.Add("CItem", );
dt.Rows.Add("DItem", );
dt.Rows.Add("EItem", );
dt.Rows.Add("FItem", );
GridView2.DataSource = dt;
GridView2.DataBind(); }
GridView2.UseAccessibleHeader = true;
GridView2.HeaderRow.TableSection = TableRowSection.TableHeader;
}
注意：
需要下载JS插件，并引入插件
http://tablesorter.com/docs/#Download
查看Download里面的jquery.tablesorter.zip.
资料来源：
http://www.c-sharpcorner.com/Blogs/46650/how-to-do-sorting-in-gridview-on-client-side-using-jquery.aspx