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="5" 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[2] { new DataColumn("Item"), new DataColumn("Price") }); dt.Rows.Add("AItem", 20); dt.Rows.Add("BItem", 30); dt.Rows.Add("CItem", 40); dt.Rows.Add("DItem", 50); dt.Rows.Add("EItem", 60); dt.Rows.Add("FItem", 70); 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