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 = "\r\n";

                        $.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>\r\n";

                            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>\r\n";

                            strHtml += "</tr>\r\n";

                        })

                        $("#gvTest").append(strHtml);  //添加进来

                    },

                    erro: function () {

                        alert("出错了");

                    }

                })

            }

        </script>

    </form>

我们返回的Josn格式

样式：

        .page {

            width: %;

            float: left;

            margin: -1px   ;

            background: #C9E4FF;

        }

        .details {

            height: 26px;

            float: left;

            padding: 16px  16px 16px;

        }

            .details span {

                height: 26px;

                line-height: 26px;

                float: left;

                padding:  5px  ;

            }

                .details span font {

                    padding:  5px;

                }

        .paging {

            height: 26px;

            float: right;

            padding: 16px 16px 16px ;

        }

            .paging a {

                height: 26px;

                float: left;

                line-height: 26px;

                padding:  9px;

                margin:    6px;

                background: #FFF;

                border-radius: 2px;

            }

            .paging span {

                height: 26px;

                float: left;

                line-height: 26px;

                padding:  10px;

                margin:    6px;

            }

                .paging span.opt {

                    background: #009EFF;

                    color: #FFF;

                }

            .paging a:hover {

                text-decoration: none;

            }

            .paging input {

                width: 58px;

                height: 26px;

                float: left;

                margin:    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:  2px 2px ;

            }

                .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:  9px;

                margin:    6px;

                background: #FFF;

            }

        #gvTest tr th {

          width:%;

        }

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

  protected void Page_Load(object sender, EventArgs e)

    {

        if (!IsPostBack)

        {

            //点的是第几页

            PageIndex = Request.QueryString["PageIndex"] == null ?  : 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[].Rows[][].ToString());

        //计算总页数

        if (PageCount % PageSize == )

        {

            TotalPage = PageCount / PageSize;

        }

        else

        {

            TotalPage = (PageCount / PageSize) + ;

        }      

        //SQL语句

        string sql = "select top " + PageSize + "* from Boda_Follow where ID not in (select  top " + PageSize * (PageIndex - ) + " ID from Boda_Follow)";

        SqlDataAdapter sda = new SqlDataAdapter(sql, conStr);

        DataSet ds = new DataSet();

        sda.Fill(ds);

        gvTest.DataSource = ds.Tables[];

        gvTest.DataBind();

        PageContent.InnerHtml = TestPage.OutPageList(this.PageSize,this.PageIndex, this.PageCount, );

        //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 <  || pageSize < )

        {

            return "";

        }

        int pageCount = totalCount / pageSize;

        if (totalCount % pageSize > )

        {

            pageCount += ;

        }

        if (pageCount < )

        {

            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 <= )

        {

            firstBtn = "<span class=\"disabled\">«上一页</span>";

        }

        if (pageIndex >= pageCount)

        {

            lastBtn = "<span class=\"disabled\">下一页»</span>";

        }

        if (pageIndex == )

        {

            firstStr = "<span class=\"cpb\">1</span>";

        }

        if (pageIndex == pageCount && pageCount > )

        {

            lastStr = "<span class=\"cpb\">" + pageCount.ToString() + "</span>";

        }

        else if (pageCount == )

        {

            lastStr = "";

        }

        int firstNum = pageIndex - (centSize / ); //中间开始的页码

        if (pageIndex < centSize)

            firstNum = ;

        int lastNum = pageIndex + centSize - ((centSize / ) + ); //中间结束的页码

        if (lastNum >= pageCount)

            lastNum = pageCount - ;

        pageStr.Append(firstBtn + firstStr);

        if (pageIndex >= centSize)

        {

            pageStr.Append("<span>...</span>\n");

        }

        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 / )))

        {

            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 - ) + " 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[]}; //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 <  || pageSize < )

        {

            return "";

        }

        int pageCount = totalCount / pageSize;

        if (totalCount % pageSize > )

        {

            pageCount += ;

        }

        if (pageCount < )

        {

            return "";

        }

        StringBuilder pageStr = new StringBuilder();

        string firstBtn = "<a href=\"javascript:GetPage(" +(pageIndex-)+","+aa+ ")\">«上一页</a>";;

        string lastBtn = "<a href=\"javascript:GetPage(" +(pageIndex+)+","+aa+ ")\">下一页»</a>";

        string firstStr = "<a href=\"javascript:GetPage(" ++","+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 <= )

        {

            firstBtn = "<span class=\"disabled\">«上一页</span>";

        }

        if (pageIndex >= pageCount)

        {

            lastBtn = "<span class=\"disabled\">下一页»</span>";

        }

        if (pageIndex == )

        {

            firstStr = "<span class=\"cpb\">1</span>";

        }

        if (pageIndex == pageCount && pageCount > )

        {

            lastStr = "<span class=\"cpb\">" + pageCount.ToString() + "</span>";

        }

        else if (pageCount == )

        {

            lastStr = "";

        }

        int firstNum = pageIndex - (centSize / ); //中间开始的页码

        if (pageIndex < centSize)

            firstNum = ;

        int lastNum = pageIndex + centSize - ((centSize / ) + ); //中间结束的页码

        if (lastNum >= pageCount)

            lastNum = pageCount - ;

        pageStr.Append(firstBtn + firstStr);

        if (pageIndex >= centSize)

        {

            pageStr.Append("<span>...</span>\n");

        }

        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 / )))

        {

            pageStr.Append("<span>...</span>");

        }

        pageStr.Append(lastStr + lastBtn);

        pageStr.Append(textPage);

        pageStr.Append(JumpPage);

        return pageStr.ToString();

    }

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

巴特西

ASP.NET中无刷新分页

最新文章

热门文章