简单 GridView AJAX 局部刷新分页例子@孟宪会

<% @ Page Language = " C# " %>

<% @ Import Namespace = " System.Data " %>
<% @ Import Namespace = " System.Data.OleDb " %>
<! DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd" >

< script runat ="server" >
   int PageIndex = 1 ;
  private String ConnectionString = @ " Provider=Microsoft.Jet.OLEDB.4.0;Data Source=|DataDirectory|MengXianHui.mdb; " ;
  public int TotalCount = 0 ;
  public int PageItem = 5 ;
  System.Data.DataView CreateDataSourceByXianhuiMeng()
  {
    Int32.TryParse(Request.QueryString[ " Page " ], out PageIndex);
    OleDbCommand cmd;
    String sql;
    OleDbConnection cn = new OleDbConnection(ConnectionString);
    cn.Open();
     // 由于是 Access 数据库，我们只进行简单的分页。对于性能要求较高的地方，请自行采取其他方法，比如存储过程等。
    sql = " SELECT COUNT(*) FROM [Document] " ;
    cmd = new OleDbCommand(sql, cn);

     // 总的记录数
    TotalCount = Convert.ToInt32(cmd.ExecuteScalar());
     // 当前页的序号  
     if (PageIndex < 1 ) PageIndex = 1 ;
     int PageCount = ( int )Math.Ceiling(( double )(TotalCount) / PageItem);
     if (PageIndex > PageCount) PageIndex = PageCount;
     int startRecord = (PageIndex - 1 ) * PageItem;

    sql = " SELECT DocumentId,DocumentGuid,Title,CreateDate FROM [Document] ORDER BY [DocumentId] DESC " ;

    OleDbDataAdapter da = new OleDbDataAdapter(sql, cn);
    DataSet ds = new DataSet();
    da.Fill(ds, startRecord, PageItem, " Document " );
    cn.Close();
     return ds.Tables[ 0 ].DefaultView;
  }


  protected void Page_Load(object sender, EventArgs e)
  {
     if (String.IsNullOrEmpty(Request.QueryString[ " Page " ]))
    {
       // 首次加载显示页面内容，并进行初始化参数。
      CreateDataSourceByXianhuiMeng();
      Page.ClientScript.RegisterStartupScript(Page.GetType(), " js " , " Pager(1) " , true );
    }
     else
    {
      Response.ClearContent();
      GridView1.DataSource = CreateDataSourceByXianhuiMeng();
      GridView1.DataBind();
      System.Text.StringBuilder sb = new System.Text.StringBuilder();
      System.IO.StringWriter sw = new System.IO.StringWriter(sb);
      HtmlTextWriter htw = new HtmlTextWriter(sw);
      GridView1.RenderControl(htw);
      Response.Write(sb.ToString());
      Response.End();
    }

  }
   // / 添加这个override void VerifyRenderingInServerForm(Control control)，是为了避免出现
   // / 类型“GridView”的控件“GridView1”必须放在具有 runat=server 的窗体标记内。
   // / 的异常
  public override void VerifyRenderingInServerForm(Control control)
  { }

</ script >

< html xmlns ="http://www.w3.org/1999/xhtml" >
< head runat ="server" >
< title > 简单 AJAX 局部刷新分页例子 </ title >
< script type ="text/javascript" >
   function GetData(p) {
     var h = window.XMLHttpRequest ? new window.XMLHttpRequest() : new ActiveXObject( " MSXML2.XMLHTTP " );
    h.open( " GET " , ' <%=Request.FilePath %>?Page= ' + p + " & " + Date.parse( new Date()), true );
    h.onreadystatechange = function () {
     if (h.readyState == 4 ) {
       if (h.status == 200 ) {
         document.getElementById( " _Containter " ).innerHTML = h.responseText;
        }
      }
     }
    h.send( null );
  }

   // /
   // / 具有分页功能的函数。
   // /
   function Pager(CurrentPage) {
    GetData(CurrentPage);
     var TotalRows = <%= TotalCount %> ;
     var Step = 3 ;
     var PageItem = <%= PageItem %> ;
    
     if (TotalRows < 1 ) {
      TotalPage = 0 ;
    }
     else {
      TotalPage = Math.ceil(TotalRows / PageItem)
    }
     var PagerContent = " 共 " + TotalPage + " 页 每页 " + PageItem + " 条 " ;
     var leftStep = CurrentPage - Step;
     var rightStep = CurrentPage + Step;
     if (leftStep < 1 ) leftStep = 1 ;
     if (rightStep > TotalPage) rightStep = TotalPage;
     if (CurrentPage > 1 ) PagerContent += " <a href='#' οnclick='Pager(1);return false;'>首页</a> <a href='' οnclick='Pager( " + (CurrentPage - 1 ) + " );return false;'>上一页</a> "
     for ( var i = leftStep; i <= rightStep; i ++ ) {
       if (i == CurrentPage) {
        PagerContent += " <strong style='color:red'> " + i + " </strong> "
      }
       else {
        PagerContent += " <a href='#' οnclick='Pager( " + i + " );return false;'> " + i + " </a> "
      }
    }

     if (rightStep < TotalPage) PagerContent += " <a href='' οnclick='Pager( " + (CurrentPage + 1 ) + " );return false;'>下一页</a> <a href='' οnclick='Pager( " + TotalPage + " );return false;'>末页</a>   "
    document.getElementById( " _Pager1 " ).innerHTML = document.getElementById( " _Pager2 " ).innerHTML = PagerContent;
  }
  alert( " 页面首次加载弹出的标记。 " )
</ script >

</ head >
< body >
   < form id ="form1" runat ="server" >
   < div id ="_Pager1" style ="padding: 10px; text-align: center" ></ div >
     < div id ="_Containter" >
       < asp:GridView ID ="GridView1" runat ="server" AutoGenerateColumns ="false" Width ="80%" >
         < HeaderStyle BackColor ="#EEEEEE" />
         < Columns >
           < asp:BoundField DataField ="DocumentId" />
           < asp:HyperLinkField HeaderText ="文章标题" DataNavigateUrlFields ="DocumentGuid" DataTextField ="Title"
            DataNavigateUrlFormatString ="http://dotnet.aspx.cc/article/{0}/read.aspx" />
           < asp:BoundField HeaderText ="发布时间" DataField ="CreateDate" />
         </ Columns >
       </ asp:GridView >
     </ div >
     < div id ="_Pager2" style ="padding: 10px; text-align: center" ></ div >
   </ form >
</ body >
</ html >