ASP.NET中无刷新分页

上次介绍了我们代码写的刷新分页，这次就来说说无刷新分页。

这次我们是在上次的基础上改动了一些，我们都知道想要无刷新，就需要Ajax,在我们的ASP.NET中AJax是和一般处理程序配合着用的。

无刷新就只在我们的两个位子，一个是呈现数据的位子，另一个则是在分页里面。

也就是：

和

我们点不同的页码是换掉这两个位子就OK了。

 原理：

1， 换分页字符串

  还记不记我们的分页怎么来的？对，就是一串字符，我们再后台拼接的，我们点页码时去访问处理程序，然后返回一个分页字符串，我们把分页字符串在重新插入分页里面，那么分页里面的页码就会随之改变，我们的第一个大问题解决。

2，换数据

    字符串在后台返回的，那我们的数据也可以从后台返回，然后在前台把下面显示数据的tr换掉就可以了。

总：后台返回我们需要的数据，在页面上替换原来的数据就可以实现我们的无刷新了。

页面

 <form id="form1" runat="server">
        <div>
            <asp:GridView runat="server" AutoGenerateColumns="False" DataKeyNames="ID" ID="gvTest">
                <Columns>
                    <asp:BoundField DataField="ID" HeaderText="编号" InsertVisible="False" ReadOnly="True" SortExpression="ID" />
                    <asp:BoundField DataField="FileName" HeaderText="文件名" SortExpression="FileName" />

                    <asp:BoundField DataField="Problems" HeaderText="问题" SortExpression="Problems" />
                    <asp:BoundField DataField="FamilyBackground" HeaderText="家庭背景" SortExpression="FamilyBackground" />
                    <asp:BoundField DataField="FamilySpecify" HeaderText="家庭特点" SortExpression="FamilySpecify" />
                    <asp:BoundField DataField="Academically" HeaderText="What" SortExpression="Academically" />
                    <asp:BoundField DataField="Classmates" HeaderText="Classmates" SortExpression="Classmates" />
                    <asp:BoundField DataField="Teaching" HeaderText="教育" SortExpression="Teaching" />
                    <asp:BoundField DataField="Adaptability" HeaderText="能力" SortExpression="Adaptability" />
                </Columns>
            </asp:GridView>   //最终会生成表格
            <br />

            //分页
        <div class="page">
            <div class="details">
                <span>每页<font><%=PageSize %></font>条</span> <span>共<font><%=PageCount %></font>条记录</span>
            </div>
            <div id="PageContent" class="paging" runat="server">
            </div>

        </div>

        </div>
        <script src="jquery-1.11.2.min.js"></script>
        <script>
            function Jump(b,c,d) {     //跳转方法       
                var a = $("#textPage").val(); //当前页码           
                GetPage(a,b,c,d); //把当前页赋值后传过来        
            }

            function GetPage(a, b, c, d) {
                $.ajax({
                    type: "post",
                    url: "PageHandler.ashx?PageIndex=" + a,
                    datatype: "json",
                    data: "PageSize=" + b + "&PageCount=" + c + "&CentSize=" + d,
                    async: false,
                    success: function (data) {
                          注： eval(data)这样转型在此处用不了
                        var obj = $.parseJSON(data);  //转成josn格式
                        console.log(obj); //查看下你要的数据是不是对的 
                        $("#PageContent").empty();//把原来的分页删除
                        $("#PageContent").append(obj.str);  //换上我们更新后的字符串

                        $("#gvTest tr:gt(1)").remove();//除了头不用移除其余都移除
                       
                        var strHtml = "
";

                        $.each(obj.pageList, function (i, item) {
                            var FileName = item.FileName == null ? "" : item.FileName;
                            var Problems = item.Problems == null ? "" : item.Problems;
                            var FamilyBackground = item.FamilyBackground == null ? "" : item.FamilyBackground;
                            var FamilySpecify = item.FamilySpecify == null ? "" : item.FamilySpecify;
                            var Academically = item.Academically == null ? "" : item.Academically;
                            var Classmates = item.Classmates == null ? "" : item.Classmates;
                            var Teaching = item.Teaching == null ? "" : item.Teaching;
                            var Adaptability = item.Adaptability == null ? "" : item.Adaptability;

                             //拼接我们新的数据
                            strHtml += "<tr>
";
                            strHtml += "<td>" + item.ID + "</td><td>" + FileName + "</td>";
                            strHtml += "<td>" + Problems + "</td><td>" + FamilyBackground + "</td>";
                            strHtml += "<td>" + FamilySpecify + "</td><td>" + Academically + "</td>";
                            strHtml += "<td>" + Classmates + "</td><td>" + Teaching + "</td>";
                            strHtml += "<td>" + Adaptability + "</td>
";
                            strHtml += "</tr>
";
                        })
                        $("#gvTest").append(strHtml);  //添加进来

                    },
                    erro: function () {
                        alert("出错了");
                    }

                })
            }
        </script>
    </form>

我们返回的Josn格式

 样式：

        .page {
             100%;
            float: left;
            margin: -1px 0 0 0;
            background: #C9E4FF;
        }

        .details {
            height: 26px;
            float: left;
            padding: 16px 0 16px 16px;
        }

            .details span {
                height: 26px;
                line-height: 26px;
                float: left;
                padding: 0 5px 0 0;
            }

                .details span font {
                    padding: 0 5px;
                }

        .paging {
            height: 26px;
            float: right;
            padding: 16px 16px 16px 0;
        }

            .paging a {
                height: 26px;
                float: left;
                line-height: 26px;
                padding: 0 9px;
                margin: 0 0 0 6px;
                background: #FFF;
                border-radius: 2px;
            }

            .paging span {
                height: 26px;
                float: left;
                line-height: 26px;
                padding: 0 10px;
                margin: 0 0 0 6px;
            }

                .paging span.opt {
                    background: #009EFF;
                    color: #FFF;
                }

            .paging a:hover {
                text-decoration: none;
            }

            .paging input {
                 58px;
                height: 26px;
                float: left;
                margin: 0 0 0 6px;
                text-align: center; /* border:1px solid #D2D7DD; border-right:0px;*/
            }

            .paging a.res {
                height: 26px;
                float: left;
                color: #FFF;
                line-height: 26px;
                margin: 0px;
                border: 0px;
                background: #009EFF;
                border-radius: 0 2px 2px 0;
            }

                .paging a.res:hover {
                    background: #00B6EC;
                }

            .paging span.cpb {
                background: #009EFF;
                color: #FFF;
            }

            .paging span.disabled, .paging span.disabled {
                height: 26px;
                float: left;
                line-height: 26px;
                padding: 0 9px;
                margin: 0 0 0 6px;
                background: #FFF;
            }


        #gvTest tr th {
          10%;
        }

 后台：  主要第一次呈现数据

  protected void Page_Load(object sender, EventArgs e)
    {
        if (!IsPostBack)
        {
            //点的是第几页
            PageIndex = Request.QueryString["PageIndex"] == null ? 1 : Convert.ToInt32(Request.QueryString["PageIndex"].ToString());
            Binds();
        }
    }

    void Binds()
    {
        SqlConnection conn = new SqlConnection(conStr);
        SqlDataAdapter sdas = new SqlDataAdapter("select count(*) from Boda_Follow", conStr);
        DataSet da = new DataSet();
        sdas.Fill(da);
        //string textPage = hfPage.Value;  跳转的值
        //总记录数  
        PageCount =Convert.ToInt32(da.Tables[0].Rows[0][0].ToString());

        //计算总页数
        if (PageCount % PageSize == 0)
        {
            TotalPage = PageCount / PageSize;
        }
        else
        {
            TotalPage = (PageCount / PageSize) + 1;
        }      

        //SQL语句
        string sql = "select top " + PageSize + "* from Boda_Follow where ID not in (select  top " + PageSize * (PageIndex - 1) + " ID from Boda_Follow)";
        SqlDataAdapter sda = new SqlDataAdapter(sql, conStr);
        DataSet ds = new DataSet();
        sda.Fill(ds);
        gvTest.DataSource = ds.Tables[0];
        gvTest.DataBind();
        PageContent.InnerHtml = TestPage.OutPageList(this.PageSize,this.PageIndex, this.PageCount, 5);
        //var dd =new { data = "1", dd = 2 };
    }

我们第一次的分页字符串

    #region 显示分页
    /// <summary>
    /// 返回分页页码
    /// </summary>
    /// <param name="pageSize">页面大小</param>
    /// <param name="pageIndex">当前页</param>
    /// <param name="totalCount">总记录数</param>
    /// <param name="linkUrl">链接地址，__id__代表页码</param>
    /// <param name="centSize">中间页码数量</param>
    /// <returns></returns>
    public static string OutPageList(int pageSize, int pageIndex, int totalCount, int centSize)
    {
        string aa = pageSize + "," + totalCount + "," + centSize;
        //计算页数
        if (totalCount < 1 || pageSize < 1)
        {
            return "";
        }
        int pageCount = totalCount / pageSize;
      
        if (totalCount % pageSize > 0)
        {
            pageCount += 1;
        }
        if (pageCount < 1)
        {
            return "";
        }
        StringBuilder pageStr = new StringBuilder();

          string firstBtn = "<a href="javascript:GetPage(" +(pageIndex-1)+","+aa+ ")">«上一页</a>";;
           string lastBtn = "<a href="javascript:GetPage(" +(pageIndex+1)+","+aa+ ")">下一页»</a>";
 　　　　  string firstStr = "<a href="javascript:GetPage(" +1+","+aa+ ")">1</a>";
　　　　　 string lastStr = "<a href="javascript:GetPage(" +pageCount+","+aa+ ")">" + pageCount.ToString() + "</a>";

        string textPage = "<input id="textPage"  value="" + pageIndex + "" type="text">";
        string JumpPage = "<a class="res" href="javascript:Jump("+ aa + ")">跳转</a>";

        if (pageIndex <= 1)
        {
            firstBtn = "<span class="disabled">«上一页</span>";
        }
        if (pageIndex >= pageCount)
        {
            lastBtn = "<span class="disabled">下一页»</span>";
        }
        if (pageIndex == 1)
        {
            firstStr = "<span class="cpb">1</span>";
        }
        if (pageIndex == pageCount && pageCount > 1)
        {
            lastStr = "<span class="cpb">" + pageCount.ToString() + "</span>";
        }
        else if (pageCount == 1)
        {
            lastStr = "";
        }
        int firstNum = pageIndex - (centSize / 2); //中间开始的页码
        if (pageIndex < centSize)
            firstNum = 2;
        int lastNum = pageIndex + centSize - ((centSize / 2) + 1); //中间结束的页码
        if (lastNum >= pageCount)
            lastNum = pageCount - 1;
        pageStr.Append(firstBtn + firstStr);
        if (pageIndex >= centSize)
        {
            pageStr.Append("<span>...</span>
");
        }
        for (int i = firstNum; i <= lastNum; i++)
        {
            if (i == pageIndex)
            {
                pageStr.Append("<span class="cpb">" + i + "</span>");
            }
            else
            {
                pageStr.Append("<a href="javascript:GetPage(" +i+","+ aa + ")">" + i + "</a>");
            }
        }
        if (pageCount - pageIndex > centSize - ((centSize / 2)))
        {
            pageStr.Append("<span>...</span>");
        }
        pageStr.Append(lastStr + lastBtn);
        pageStr.Append(textPage);
        pageStr.Append(JumpPage);
        return pageStr.ToString();
    }

处理程序

需要引用，这个需要去网上下载的

    public void ProcessRequest(HttpContext context)
    {
        context.Response.ContentType = "text/plain";
        int PageIndex = Convert.ToInt32(context.Request.QueryString["PageIndex"]); //当前页码
        int PageSize = Convert.ToInt32(context.Request.Form["PageSize"]);  //每页大小
        int PageCount = Convert.ToInt32(context.Request.Form["PageCount"]);//总记录数
        int CentSize = Convert.ToInt32(context.Request.Form["CentSize"]); //中间显示多少个
      
        string strPage = strHtml(PageSize, PageIndex, PageCount, CentSize);

         string sql = "select top " + PageSize + "* from Boda_Follow where ID not in (select  top " + PageSize * (PageIndex - 1) + " ID from Boda_Follow)";
        SqlDataAdapter sda = new SqlDataAdapter(sql, conStr);
        DataSet ds = new DataSet();
        sda.Fill(ds);

        var data = new { str = strPage,pageList=ds.Tables[0]}; //json数据格式，我们再前台转换就可以用
        context.Response.Write(JsonConvert.SerializeObject(data));

  /// <summary>
    /// 分页字符串
    /// </summary>
    /// <param name="pageSize">每页显示多少个</param>
    /// <param name="pageIndex">当前页码</param>
    /// <param name="totalCount">总记录数</param>
    /// <param name="centSize">中间显示多少个页码</param>
    /// <returns>分页字符串</returns>
    public string strHtml(int pageSize, int pageIndex, int totalCount, int centSize)
    {
        string aa = pageSize + "," + totalCount + "," + centSize; //我们传递的参数
        //计算页数
        if (totalCount < 1 || pageSize < 1)
        {
            return "";
        }
        int pageCount = totalCount / pageSize;

        if (totalCount % pageSize > 0)
        {
            pageCount += 1;
        }
        if (pageCount < 1)
        {
            return "";
        }
        StringBuilder pageStr = new StringBuilder();

        string firstBtn = "<a href="javascript:GetPage(" +(pageIndex-1)+","+aa+ ")">«上一页</a>";;
        string lastBtn = "<a href="javascript:GetPage(" +(pageIndex+1)+","+aa+ ")">下一页»</a>";
        string firstStr = "<a href="javascript:GetPage(" +1+","+aa+ ")">1</a>";
        string lastStr = "<a href="javascript:GetPage(" +pageCount+","+aa+ ")">" + pageCount.ToString() + "</a>";

        string textPage = "<input id="textPage"  value="" + pageIndex + "" type="text">";
        string JumpPage = "<a class="res" href="javascript:Jump("+ aa + ")">跳转</a>";

        if (pageIndex <= 1)
        {
            firstBtn = "<span class="disabled">«上一页</span>";
        }
        if (pageIndex >= pageCount)
        {
            lastBtn = "<span class="disabled">下一页»</span>";
        }
        if (pageIndex == 1)
        {
            firstStr = "<span class="cpb">1</span>";
        }
        if (pageIndex == pageCount && pageCount > 1)
        {
            lastStr = "<span class="cpb">" + pageCount.ToString() + "</span>";
        }
        else if (pageCount == 1)
        {
            lastStr = "";
        }
        int firstNum = pageIndex - (centSize / 2); //中间开始的页码
        if (pageIndex < centSize)
            firstNum = 2;
        int lastNum = pageIndex + centSize - ((centSize / 2) + 1); //中间结束的页码
        if (lastNum >= pageCount)
            lastNum = pageCount - 1;
        pageStr.Append(firstBtn + firstStr);
        if (pageIndex >= centSize)
        {
            pageStr.Append("<span>...</span>
");
        }
        for (int i = firstNum; i <= lastNum; i++)
        {
            if (i == pageIndex)
            {
                pageStr.Append("<span class="cpb">" + i + "</span>");
            }
            else
            {
                pageStr.Append("<a href="javascript:GetPage(" + i+","+ aa + ")">" + i + "</a>");
            }
        }
        if (pageCount - pageIndex > centSize - ((centSize / 2)))
        {
            pageStr.Append("<span>...</span>");
        }
        pageStr.Append(lastStr + lastBtn);
        pageStr.Append(textPage);
        pageStr.Append(JumpPage);
        return pageStr.ToString();

    }

你点页码就是无刷新的了。 上篇 自定义ASP.NET中刷新分页