利用jQuery 实现GridView异步排序、分页的代码
2024-05-06 14:11:38
供稿:网友
每次请求备份管理页面时,服务端会把所以的备份还原信息都传到客户端,然后ui.tabs将两种信息折叠起来分别显示,好在ui.tabs给我提供ajax功能,我们的每个tab可以直接应用另外一个页面
如:
代码如下:
<div id="container">
<ul>
<li><a href="#fragment-1"><span>备份</span></a></li>
<li><a href="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
代码
代码如下:
<body onload="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>