jQuery实现GridView异步排序和分页功能
发布时间：2018-08-17 12:40:42 所属栏目：传媒 来源：站长网
导读：经常会用到jquery.ui.tabs标签，如我们可以把备份管理放在一个页面上，而该页面有两个tab分别为备份和还原，但这样会现在这个页面臃肿，每次请求备份管理页面时，服务端会把所以的备份还原信息都传到客户端，然后ui.tabs将两种信息折叠起来分别显示，好在ui
|
副标题[/!--empirenews.page--]
经常会用到jquery.ui.tabs标签，如我们可以把备份管理放在一个页面上，而该页面有两个tab分别为备份和还原，但这样会现在这个页面臃肿，每次请求备份管理页面时，服务端会把所以的备份还原信息都传到客户端，然后ui.tabs将两种信息折叠起来分别显示，好在ui.tabs给我提供ajax功能，我们的每个tab可以直接应用另外一个页面
如： Copy to Clipboard 引用的内容：[www.veryhuo.com]
<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 Copy to Clipboard引用的内容：[www.veryhuo.com]
<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> <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> 注意，我们在Body的onload事件中指定了一个 函数，他会在页面被加载时请求服务端，传回数据。本身是个ajax请求 原形如下： Copy to Clipboard引用的内容：[www.veryhuo.com]
var getPageData=function(i) { $.ajax({ url:'Restore.aspx?'+new Date()+'&page='+i,//指定pageindex type:'get', success:function(data,textStatus) { $('#ShowData')[0].innerHTML=data; }, error:function(XMLHttpRequest,textStatus) { //debugger; $('#ShowData').text(XMLHttpRequest.responseText); }, complete:function(XMLHttpRequest,textStatus) { } }); （编辑：武汉站长网） 【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容! |
站长推荐
热点阅读