利用jQuery 实现GridView异步排序、分页的代码 - Web前端
作者：98wpeu发布时间：2026-07-28分类：网页前端技术浏览：4
导读：每次请求备份管理页面时，服务端会把所以的备份还原信息都传到客户端，然后UI.tabs将两种信息折叠起来分别显示，好在ui.TABs给我提供Ajax功能，我们的每个tab可以直接应用...
每次请求备份管理页面时，服务端会把所以的备份还原信息都传到客户端，然后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>
<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请求
原形如下：
代码
复制代码 代码如下:
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)
{
}
});
接下来就是排序了，通过get方式指定排序字段，排序方向。函数如下：
代码
复制代码 代码如下:
var sortDataGridView=function(sortExpression,sortDirection)
{
event.returnVaule=false;//阻止提交服务器
$.ajax({
url:'Restore.aspx?'+new Date()+'&sortEx='+sortExpression+'&sortDir='+sortDirection,//IE从在缓存，因此加new Date（）防止缓存的影响
type:'get',
success:function(data,textStatus)
{
$('#ShowData')[0].innerHTML=data;
},
error:function(XMLHttpRequest,textStatus)
{
$('#ShowData').text(XMLHttpRequest.responseText);
},
complete:function(XMLHttpRequest,textStatus)
{
}
});
}
当点击GridView中HeadText时我们要触发 sortDataGridView实现异步排序，查看GridView的原始生成内容，实际上是个A标记<a href="javascript:__dopostBack('gvRestore','Sort$WorkId')">
我们要为该标记添加一个onclick事件，并移除href属性值，以防止PostBack服务器。因此我在GridView的RowDataBound事件做如下处理：
代码
复制代码 代码如下:
protected void gvRestore_RowDataBound(Object sender, GridViewRowEventArgs e)
{
if (e.Row.RowType == DataControlRowType.Header)
{
for (int i = 1; i <= 7; i++)
{
linkButton lt = (LinkButton)e.Row.Cells[i].Controls[0];
lt.attributes["href"] = "#";
lt.OnclientClick = string.Format(" return sortDataGridView('{0}','{1}')", lt.CommandArgument, "ASC");
}
}
if (e.Row.RowType == DataControlRowType.Pager)
{
e.Row.Visible = false;
}
}
到这一步，思路基本上已经清晰，剩下的事，就是在服务端响应ajax请求了，很简单，直接看代码，要注意是调用GridView的RendControl方法，输出html。
现在可以实现gridview的ajax排序和分页 ，总结一下思路其实很简单，但在实现的时还是走了点弯路，主要时原本想同通过code形式手工实例化一个GridView，但最终还是没有实现，因为我添加了一个模板列。在模板列中添加一个intput type='Radio' 我在code时继承ITemplate，但我确不知怎样实现value='<%#Eval("operatePath") %>'的绑定，这里留下一个问题吧，谁知道，请告诉我。
复制代码 代码如下:
<asp:TemplateField HeaderText="选择">
<ItemTemplate>
<input id="Radio1" type="radio" name="Restore" value='<%#Eval("operatePath") %>'/><label for="Radio1">选择</label>
</ItemTemplate>
</asp:TemplateField>
代码
复制代码 代码如下:
static string sortDirection = "ASC";
protected void Page_Load(object sender, EventArgs e)
{
if (hasKeyName("page"))
{
if (!string.IsnullOrempty(Request.QueryString["page"].toString()))
{
this.gvRestore.PageIndex = int.Parse(Request.QueryString["page"].ToString());
ResponseData(this.gvRestore);
}
}
else
if (hasKeyName("sortEx"))
{
string sortEx = Request.QueryString["sortEx"].ToString();
string sortDir = Request.QueryString["sortDir"].ToString();
if (string.Compare(sortDir, sortDirection, true) == 0)
{
this.gvRestore.Sort(sortEx, SortDirection.Ascending);
sortDirection = "DSAC";
}
else
{
this.gvRestore.Sort(sortEx, SortDirection.Descending);
sortDirection = "ASC";
}
ResponseData(this.gvRestore);
}
}
private bool hasKeyName(string key)
{
string[] keys = Request.QueryString.AllKeys;
forEach (string str in keys)
{
if (String.Compare(key, str, true) == 0)
return true;
}
return false;
}
private void ResponseData(GridView gv)
{
gv.DataSourceID = this.SqlDataSource1.ID;
System.Globalization.CultureInfo info = new System.Globalization.CultureInfo("ZH-CN", true);
System.IO.StringWriter sWriter = new System.IO.StringWriter(info);
System.WEB.UI.HtmlTextWriter html = new HtmlTextWriter(sWriter);
gv.Databind();
if (gv != Null)
{
gv.RenderControl(html);
}
Response.Write(html.InnerWriter);
Response.Write(GetNav(gv.PageCount));
Response.Flush();
Response.End();
}
public string GetNav(int pagesize)
{
string NavStr = @"<table><tr>";
for (int i = 0; i < pagesize; i++)
{
NavStr = NavStr + @"<td><a href='#' onclick='getPageData(" + (i + 1).ToString() + ")'>" + (i + 1).ToString() + @" | " + @"</a></td>";
}
NavStr = NavStr + @"</tr></table>";
return NavStr;
}
public override void VerifyRenderingInServerForm(Control control)
{
//base.VerifyRenderingInServerForm(control);
}
protected void gvRestore_PreRender(object sender, EventArgs e)
{
this.gvRestore.Visible = false;
}
如：
复制代码 代码如下:
<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>
<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请求
原形如下：
代码
复制代码 代码如下:
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)
{
}
});
接下来就是排序了，通过get方式指定排序字段，排序方向。函数如下：
代码
复制代码 代码如下:
var sortDataGridView=function(sortExpression,sortDirection)
{
event.returnVaule=false;//阻止提交服务器
$.ajax({
url:'Restore.aspx?'+new Date()+'&sortEx='+sortExpression+'&sortDir='+sortDirection,//IE从在缓存，因此加new Date（）防止缓存的影响
type:'get',
success:function(data,textStatus)
{
$('#ShowData')[0].innerHTML=data;
},
error:function(XMLHttpRequest,textStatus)
{
$('#ShowData').text(XMLHttpRequest.responseText);
},
complete:function(XMLHttpRequest,textStatus)
{
}
});
}
当点击GridView中HeadText时我们要触发 sortDataGridView实现异步排序，查看GridView的原始生成内容，实际上是个A标记<a href="javascript:__dopostBack('gvRestore','Sort$WorkId')">
我们要为该标记添加一个onclick事件，并移除href属性值，以防止PostBack服务器。因此我在GridView的RowDataBound事件做如下处理：
代码
复制代码 代码如下:
protected void gvRestore_RowDataBound(Object sender, GridViewRowEventArgs e)
{
if (e.Row.RowType == DataControlRowType.Header)
{
for (int i = 1; i <= 7; i++)
{
linkButton lt = (LinkButton)e.Row.Cells[i].Controls[0];
lt.attributes["href"] = "#";
lt.OnclientClick = string.Format(" return sortDataGridView('{0}','{1}')", lt.CommandArgument, "ASC");
}
}
if (e.Row.RowType == DataControlRowType.Pager)
{
e.Row.Visible = false;
}
}
到这一步，思路基本上已经清晰，剩下的事，就是在服务端响应ajax请求了，很简单，直接看代码，要注意是调用GridView的RendControl方法，输出html。
现在可以实现gridview的ajax排序和分页 ，总结一下思路其实很简单，但在实现的时还是走了点弯路，主要时原本想同通过code形式手工实例化一个GridView，但最终还是没有实现，因为我添加了一个模板列。在模板列中添加一个intput type='Radio' 我在code时继承ITemplate，但我确不知怎样实现value='<%#Eval("operatePath") %>'的绑定，这里留下一个问题吧，谁知道，请告诉我。
复制代码 代码如下:
<asp:TemplateField HeaderText="选择">
<ItemTemplate>
<input id="Radio1" type="radio" name="Restore" value='<%#Eval("operatePath") %>'/><label for="Radio1">选择</label>
</ItemTemplate>
</asp:TemplateField>
代码
复制代码 代码如下:
static string sortDirection = "ASC";
protected void Page_Load(object sender, EventArgs e)
{
if (hasKeyName("page"))
{
if (!string.IsnullOrempty(Request.QueryString["page"].toString()))
{
this.gvRestore.PageIndex = int.Parse(Request.QueryString["page"].ToString());
ResponseData(this.gvRestore);
}
}
else
if (hasKeyName("sortEx"))
{
string sortEx = Request.QueryString["sortEx"].ToString();
string sortDir = Request.QueryString["sortDir"].ToString();
if (string.Compare(sortDir, sortDirection, true) == 0)
{
this.gvRestore.Sort(sortEx, SortDirection.Ascending);
sortDirection = "DSAC";
}
else
{
this.gvRestore.Sort(sortEx, SortDirection.Descending);
sortDirection = "ASC";
}
ResponseData(this.gvRestore);
}
}
private bool hasKeyName(string key)
{
string[] keys = Request.QueryString.AllKeys;
forEach (string str in keys)
{
if (String.Compare(key, str, true) == 0)
return true;
}
return false;
}
private void ResponseData(GridView gv)
{
gv.DataSourceID = this.SqlDataSource1.ID;
System.Globalization.CultureInfo info = new System.Globalization.CultureInfo("ZH-CN", true);
System.IO.StringWriter sWriter = new System.IO.StringWriter(info);
System.WEB.UI.HtmlTextWriter html = new HtmlTextWriter(sWriter);
gv.Databind();
if (gv != Null)
{
gv.RenderControl(html);
}
Response.Write(html.InnerWriter);
Response.Write(GetNav(gv.PageCount));
Response.Flush();
Response.End();
}
public string GetNav(int pagesize)
{
string NavStr = @"<table><tr>";
for (int i = 0; i < pagesize; i++)
{
NavStr = NavStr + @"<td><a href='#' onclick='getPageData(" + (i + 1).ToString() + ")'>" + (i + 1).ToString() + @" | " + @"</a></td>";
}
NavStr = NavStr + @"</tr></table>";
return NavStr;
}
public override void VerifyRenderingInServerForm(Control control)
{
//base.VerifyRenderingInServerForm(control);
}
protected void gvRestore_PreRender(object sender, EventArgs e)
{
this.gvRestore.Visible = false;
}
相关推荐
- jquery form表单提交插件asp.net后台中文解码 - Web前端
- 最佳6款用于移动网站开发的jQuery 图片滑块插件小结 - Web前端
- jquery 实现的改变颜色与背景的代码 change(fontsize,background)补充2 - Web前端
- jQuery-Easyui 1.2 实现多层菜单效果的代码 - Web前端
- jQuery模板技术和数据绑定实现代码 - Web前端
- jquery+ashx无刷新GridView数据显示插件(实现分页、排序、过滤功能) - Web前端
- jquery对元素拖动排序示例 - Web前端
- Jquery Ajax学习实例3 向WebService发出请求，调用方法返回数据 - Web前端
- jquery photoFrame 图片边框美化显示插件 - Web前端
- JQuery 插件模板 制作jquery插件的朋友可以参考下 - Web前端
- 网页前端技术排行
-
- 1[Web前端]用javascript实现默认图片替代未显示的图片 - Web前端
- 2分析Iconfont-阿里巴巴矢量常用图标库 - Web前端
- 3【第六章】Foundation之按钮和下拉功能 - Web前端
- 4jQuery实例教程:制作网页中可折叠的面板 - Web前端
- 5基于jquery的滚动条滚动固定div(附演示下载) - Web前端
- 6jQuery编写widget的一些技巧分享 - Web前端
- 7jQuery实现鼠标移到元素上动态提示消息框效果 - Web前端
- 8在Mac/PC上远程调试iPhone/iPad上的网页 - Web前端
- 9分享精心挑选的12款优秀jQuery Ajax分页插件和教程 - Web前端
- 最近发表
-
- WordPress随机显示特色图片插件：Random Post Thumbnails
- KeePass实现Chrome浏览器自动填充密码方法一
- LNMP一键包nginx 301强制跳转到https教程
- KeePass实现Chrome浏览器自动填充密码方法二
- #建站# 免费的VPS管理软件Xshell8/Xftp8中文版下载
- 使用Xshell 8连接VPS教程_电脑登录vps的方法
- WordPress评论界面添加烟花????效果
- 不同浏览器书签同步方案：坚果云+Floccus_详细使用教程
- iOS端KeePassXC客户端APP：Strongbox Password Safe
- 给WordPress评论中的Gravatar头像图片添加ALT属性