Oracle分页之三：利用PagerView来实现无刷新GridView

接上面一节，上面还存在问题就是分页控件使用的仍然是服务器端控件，没点一次就要刷新页面一次，也就是向服务器端请求一次。那么用什么方法能够让页面无刷新而进行分页呢？

在这里，我想到了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接口的使用方法即可。

 

具体的结果页面如下：