本文转自：http://www.cnblogs.com/scy251147/archive/2011/04/16/2018355.html
接上面一节，上面还存在问题就是分页控件使用的仍然是服务器端控件，没点一次就要刷新页面一次，也就是向服务器端请求一次。那么用什么方法能够让页面无刷新而进行分页呢？
在这里，我想到了PagerView这套开源控件，有兴趣的朋友可以通过PagerView关键字去搜搜，然后研究下，这个封装的还是挺好的。
但是，这里遇到一个问题，如何让页面的GridView实现无刷新加载数据呢？这里我不得不提到我以前文章中写道的ICallbackEventhandler接口，这是微软的一个ajax回调接口，然后再配合这输出页面HTML的方式，不就可以实现无刷新GridView分页了吗？
前台代码：
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="PagerWithPagerView.aspx.cs" Inherits="PagerWithPagerView" %> <html xmlns="http://www.w3.org/1999/xhtml"> <head runat="server"> <title></title> <script src="tableview/scripts/jquery.js" type="text/javascript"></script> <script src="tableview/scripts/PagerView.js" type="text/javascript"></script> <link href="tableview/style.css" rel="stylesheet" type="text/css" /> <link href="css/TableZB.css" rel="stylesheet" type="text/css" /> <link href="css/swcss.css" rel="stylesheet" type="text/css" /> <link href="css/GridViewCSS_O.css" rel="stylesheet" type="text/css" /> <%--<style type="text/css"> .PagerView a { background:url(images/loginButton.gif) no-repeat; } </style>--%> </head> <body> <form id="form1" runat="server"> <div id="myData"> <asp:GridView CssClass="GVtable" ID="GridView1" runat="server" Width="100%" AutoGenerateColumns="False"> <Columns> <asp:TemplateField HeaderText="编号"> <ItemTemplate> <%#Eval("R").ToString() %></ItemTemplate></asp:TemplateField> <asp:TemplateField HeaderText="纳税人识别码"> <ItemTemplate><%#Eval("nsrsbm").ToString() %></ItemTemplate></asp:TemplateField> <asp:TemplateField HeaderText="纳税人名称"> <ItemTemplate><%#Eval("nsr_mc") %></ItemTemplate></asp:TemplateField> <asp:TemplateField HeaderText="登记类型"> <ItemTemplate><%#Eval("djlx_mc")%></ItemTemplate></asp:TemplateField> <asp:TemplateField HeaderText="登记状态"> <ItemTemplate><%#Eval("dj_ztmc")%></ItemTemplate></asp:TemplateField> <asp:TemplateField HeaderText="注册类型"> <ItemTemplate><%#Eval("zclx_mc")%></ItemTemplate></asp:TemplateField> <asp:TemplateField HeaderText="所别"> <ItemTemplate><%#Eval("gljg_mc")%></ItemTemplate></asp:TemplateField> <asp:TemplateField HeaderText="专管员"> <ItemTemplate><%#Eval("zgy_mc")%></ItemTemplate></asp:TemplateField> <asp:TemplateField HeaderText="所属性"> <ItemTemplate><%#Eval("ssx_mc")%></ItemTemplate></asp:TemplateField> <asp:TemplateField HeaderText="操作"> <ItemTemplate> <asp:LinkButton ID="lbtnOperation" CommandArgument='<%#Eval("nsrsbm") %>' runat="server">编辑</asp:LinkButton> </ItemTemplate> </asp:TemplateField> </Columns> </asp:GridView> </div> <script type="text/javascript"> window.onload=function(){ var pager = new PagerView('pager'); //pager对象申明 pager.itemCount = <%=totalCount %>; //设置当前显示的页索引 pager.size = <%=_pageSize %>; //设置每页显示条数 pager.onclick = function(index) { raiseCallBack(index,""); //当分页按钮被点击的时候，触发的Ajax回调函数 }; pager.render(); } //ajax回调成功后，进行处理的函数 function rServer(arg,context) { $("#myData").text(); $("#myData").html(arg); } //ajax回调函数，用户向后台请求数据 function raiseCallBack(arg,context) { <%=ClientScript.GetCallbackEventReference(this,"arg","rServer","context") %>; } </script> </form> <div id="pager"></div> </body> </html>
那么在后台只要先实现ICallbackEventhandler接口，然后获取从前台传送过来的数据，进行处理，最后将html标签元素打到前台即可。
后台代码如下：
using System; using System.Collections.Generic; using System.Linq; using System.Web; using System.Web.UI; using System.Web.UI.WebControls; using System.Data; public partial class PagerWithPagerView : System.Web.UI.Page,ICallbackEventHandler { protected void Page_Load(object sender, EventArgs e) { if (!IsPostBack) { Bind(); } } public static int _pageSize = 11; public static int _startSize = 1; public static int totalCount; public string _str; //绑定gridview 并将绑定后的gridview对象返回 private GridView Bind() { string sqlQuery = "select nsrsbm,nsr_mc,djlx_mc,dj_ztmc,zclx_mc,gljg_mc,zgy_mc,ssx_mc from scott.t_yhs_djxxtz"; DataSet ds = Pagination.PaginationPager(sqlQuery, _pageSize, _startSize, out totalCount); GridView1.DataSource = ds.Tables["Table"]; GridView1.DataBind(); return GridView1; } public string GetCallbackResult() { return _str; //将html返回到前台 } public void RaiseCallbackEvent(string eventArgument) { if (!string.IsNullOrEmpty(eventArgument)) { _startSize = Int32.Parse(eventArgument); Response.ClearContent(); //清除 GridView gv=Bind(); //得到GridView对象 System.Text.StringBuilder sb = new System.Text.StringBuilder(); System.IO.StringWriter sw = new System.IO.StringWriter(sb); HtmlTextWriter htw = new HtmlTextWriter(sw); Header.RenderControl(htw); gv.RenderControl(htw); //将生成的html元素render出来 _str = sb.ToString(); } } }
代码中已经有了注释，我这里不再详细说明，这里只要知道ICallbackEventhandler接口的使用方法即可。