利用jquery实现GridView异步排序、分页

利用jquery实现GridView异步排序、分页2011-11-10 cnblogs mingxuan经常会用到jquery.ui.tabs标签，如我们可以把备份管理放在一个页面上，而该页面有两个tab分别为备份和还原，但这样会现在这个页面臃肿，每次请求备份管理页面时，服务端会把所以的备份还原信息都传到客户端，然后ui.tabs将两种信息折叠起来分别显示，好在ui.tabs给我提供ajax功能，我们的每个 tab可以直接应用另外一个页面

如：

<div id="container"><ul><li><ahref="#fragment-1"><span>备份</span></a></li><li><ahref="Restore.aspx"><span>还原</span></a></li></ul></div>

但这样，当Restore.aspx存在服务端控件时，当他与服务端交互时，将不会很理想，比如GridView自带排序，分页就不可能实现，因为每一次交互他总是他只会显示你第一次加载该tab的状态（gridview它可能总是显示的第一页）,有时甚至会充开整个页面。

解决这个问题，首先想到时ajax以防止被引用的页面全部重新加载。UpdatePanel我试了一下不行，如是便想到juery。

下面我将示范如何结合jquery实现GridView的异步排序，分页。

首先我们还时在页面放放一个gridview，他不会作为页面中真正显示的部分，而是作为辅助html输出，当一个ajax请求来到时，我们利用这个GridView， Render为Html输出，ajax的回调函数完成显示。为了不显示GridView我在PreRender中设置Visible = false，不能直接设置Visible=false否则他不会被Render成html

<bodyonload="getPageData（1）"><form id="form1" runat="server"><div ><div id="ShowData"> <asp:GridView id="gvRestore" runat="server"Width="100%" PageSize="5" DataSourceID="SqlDataSource1" AutoGenerateColumns="False" AllowPaging="True"OnRowDataBound="gvRestore_RowDataBound" AllowSorting="True" Height="138px" OnDataBound="gvRestore_DataBound" OnPreRender="gvRestore_PreRender" ><Columns><asp:BoundField DataField="ID" HeaderText="ID" SortExpression="ID" Visible="False"></asp:BoundField><asp:BoundField DataField="WorkId" HeaderText="工号" SortExpression="WorkId"></asp:BoundField><asp:BoundField DataField="userName" HeaderText="操作人姓名" SortExpression="userName"></asp:BoundField><asp:BoundField DataField="operateType" HeaderText="操作类型" SortExpression="operateType"></asp:BoundField><asp:BoundField DataField="operateWay" HeaderText="操作方式" SortExpression="operateWay"></asp:BoundField><asp:BoundField DataField="operateTime" HeaderText="操作时间" SortExpression="operateTime"></asp:BoundField><asp:BoundField DataField="operatePath" HeaderText="保存路径" SortExpression="operatePath"></asp:BoundField><asp:BoundField DataField="operateReason" HeaderText="操作原因" SortExpression="operateReason"></asp:BoundField> <asp:TemplateField HeaderText="选择"><ItemTemplate><input id="Radio1" type="radio"name="Restore" value="<%#Eval（"operatePath"） %>"/><label for="Radio1">选择</label></ItemTemplate></asp:TemplateField></Columns></asp:GridView></div><asp:SqlDataSource id="SqlDataSource1" runat="server" SelectCommand="SELECT * FROM [BackUpInfo] where operateType="备份"" ConnectionString="<%$ ConnectionStrings:BackUpConnectionString %>"></asp:SqlDataSource></div></form></body>