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

来源：互联网发布：java 开源爬虫框架编辑：程序博客网时间：2024/04/28 04:24

<%@ 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:GridViewID="GridView1" runat="server" AutoGenerateColumns="false" Width="80%">
        <HeaderStyleBackColor="#EEEEEE"/>
        <Columns>
          <asp:BoundFieldDataField="DocumentId"/>
          <asp:HyperLinkFieldHeaderText="文章标题" DataNavigateUrlFields="DocumentGuid" DataTextField="Title"
            DataNavigateUrlFormatString="http://dotnet.aspx.cc/article/{0}/read.aspx"/>
          <asp:BoundFieldHeaderText="发布时间" DataField="CreateDate"/>
        </Columns>
      </asp:GridView>
    </div>
    <div id="_Pager2" style="padding: 10px; text-align: center"></div>
  </form>
</body>
</html>