简单GridView AJAX局部刷新分页例子


下面代码是一个简单的实现　Ajax　分页的例子。
查看例子
全部代码如下：
ASPX 代码
<%@ 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=# onclick=Pager(1);return false;>首页</a> <a href= onclick=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=# onclick=Pager(" + i + ");return false;>" + i + "</a> "
      }
    }
    if (rightStep < TotalPage) PagerContent += "<a href= onclick=Pager(" + (CurrentPage + 1) + ");return false;>下一页</a> <a href= onclick=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>

补充：Web开发 , ASP.Net ,