ASP.NET 使用Ajax + JQuery实现分页功能

两年前的博客，那时我还青涩。。。

为啥用Ajax？

Ajax应用程序的优势在于：
1. 通过异步模式，提升了用户体验。
2. 优化了浏览器和服务器之间的传输，减少不必要的数据往返，减少了带宽占用。
3. Ajax引擎在客户端运行，承担了一部分本来由服务器承担的工作，从而减少了大用户量下的服务器负载。

Ajax 最大的特点是什么？

Ajax可以实现动态不刷新（局部刷新）。
就是能在不更新整个页面的前提下维护数据。
这使得Web应用程序更为迅捷地回应用户动作，并避免了在网络上发送那些没有改变过的信息。

我实现分页功能的大体思路是这样的：

1 写一个生成分页字符串的方法，这个类接收总记录条数，每页显示记录数，当前页码。
2 再用到分页的页面一加载就使用ajax调用后台方法,获取一个默认的分页字符串，显示在网页。
3 当点击分页上的按钮，再去用ajax调用后台方法，此时要传需要的值，将返回的字符串，显示在网页。

先放目录结构截图：

标出来的必须有，bootstrap最好不要文件夹下的最好都留着

 

cs文件

createPager.cs 

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;

namespace Test.testPager
{
    public class createPager
    {
        /// <summary>
        /// 分页
        /// </summary>
        /// <param name="currentPageNo">当前页码</param>
        /// <param name="recrodCount">总记录条数</param>
        /// <param name="pageCount">总页数</param>
        /// <returns>分页字符串</returns>
        public string pager(int currentPageNo, int recrodCount, int pageCount)
        {
            int startPage = 1;//默认起始
            int endPage = 7;//默认结束 即最多显示7个页码按钮
            int prevPage = currentPageNo - 1;//上一页
            int nextPage = currentPageNo - (-1);//下一页

            string pagerStr = "";
            if (recrodCount == 0)
            {
                pagerStr = "<div class='pageInfo'>这里没有数据！</div>";
            }
            else
            {
                if (currentPageNo > 4) //分页条只显示7页 4 = (7+1) /2
                {
                    if (currentPageNo <= pageCount - 3)
                    {
                        startPage = currentPageNo - 3;
                        endPage = currentPageNo + 3;
                    }
                    else
                    {
                        endPage = pageCount;
                        startPage = endPage - 6;
                        if (startPage < 1)
                        {
                            startPage = 1;
                        }
                    }
                }

                //生成分页条
                if (currentPageNo > 1)
                {
                    pagerStr = "<ul class='pagination'><li class='prev'><a href='javascript:void(0);' οnclick='toPage(" + prevPage + ")'>上一页</a></li>";
                }
                else
                {
                    pagerStr = "<ul class='pagination'><li class='prev' ><a style='background-color:#FFE4E1 !important;'>上一页</a></li>";
                }
                if (pageCount <= endPage)
                {
                    for (int i = startPage; i <= pageCount; i++)
                    {
                        if (i == currentPageNo)
                        {
                            pagerStr = pagerStr + "<li><a a_i='" + i + "' href='javascript:void(0);' οnclick='toPage(" + i + ")' class='css_curPage'>" + i + "</a></li>";
                        }
                        else
                        {
                            pagerStr = pagerStr + "<li><a a_i='" + i + "' href='javascript:void(0);' οnclick='toPage(" + i + ")'>" + i + "</a></li>";
                        }
                    }
                }
                else
                {
                    for (int i = startPage; i <= endPage; i++)
                    {
                        pagerStr = pagerStr + "<li><a a_i='" + i + "' href='javascript:void(0);' οnclick='toPage(" + i + ")'>" + i + "</a></li>";
                    }
                }
                if (currentPageNo < pageCount)
                {
                    pagerStr = pagerStr + "<li class='next'><a href='javascript:void(0);' οnclick='toPage(" + nextPage + ")'>下一页</a></li></ul>";
                }
                else
                {
                    pagerStr = pagerStr + "<li class='next'><a style='background-color:#FFE4E1 !important;'>下一页</a></li></ul>";
                }

                pagerStr = pagerStr + "<div class='pageInfo'>第 " + currentPageNo + " 页</div>";
                pagerStr = pagerStr + "<div class='pageInfo'>共 " + pageCount + " 页</div>";
                pagerStr = pagerStr + "<div class='pageInfo'>跳转到第 "
                    + "<input id='goToPage' name='goToPage' type='text' style='width:30px;height:18px;border:none;border-bottom:1px solid red;text-align:center;' οnblur='checkPageNo_()' /> 页"
                    + "<span class='glyphicon glyphicon-search' οnclick='findPage()' style='cursor:pointer;margin-left:5px;color:red;'></span>"
                    + "</div>";
                pagerStr = pagerStr + "<div class='pageInfo'>共 " + recrodCount + " 条记录</div>";
            }
            return pagerStr;
        }
    }
}

用到分页的页面

Test1.aspx

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Test1.aspx.cs" Inherits="Test.AJAXJQ分页.Test1" %>

<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <title></title>
    <link  rel="stylesheet" href="../bootstrap/css/bootstrap.min.css" />
    <script src="../jQuery/jquery.min.js"></script>
    <script src="../bootstrap/js/bootstrap.min.js"></script>
    <style>
        ul li {
            display: inline-block !important;
            margin: 0 2px !important;
        }

            ul li a {
                color: red !important;
            }

                ul li a:hover {
                    background-color: white !important;
                    border-color: red !important;
                }

        .css_curPage {
            background-color: #FFF5EE !important;
            color: red !important;
            border-color: red !important;
        }

        .pageInfo {
            display: inline-block;
            padding: 5px 10px;
            border: red 1px solid;
            position: relative;
            left: 20px;
            top: -12px;
            margin-right: 10px;
        }

        #toPage_btn:hover {
            background-color: red;
            color: white;
        }
    </style>
</head>
<body οnlοad="getPager()"> // 一加载即调用
    <form id="form1" runat="server">
    <div>
        总记录条数：<%=recordCount %>
        <br />
        每页显示数：<%=recordCountPerPage %>
        <br />
        总页数：<%=pageCount %>
    </div>
    <div id="container" style="display: block; text-align: center;">

    </div>
    </form>
</body>
    <script >

        function setContainer(text) {
            document.getElementById("container").innerHTML = ('<br/>' + text + '<br/>当前页数：'+curPage);
        }

        var recordCount = "<%=recordCount %>";
        var recordCountPerPage = "<%=recordCountPerPage %>";
        var pageCount = "<%=pageCount %>";
        var curPage = 1;
        function getPager() {
            $.ajax({
                type: 'post',
                contentType: "application/json; charset=utf-8",
                dataType: "json",//返回数据类型
                url: 'Test1.aspx/getPager',
                data: JSON.stringify　　　　　　          //传递的参数使用JSON.stringify转译为JSON格式
                ({
                    "recordCount": recordCount,　　　　　 //传递给后台的参数格式："参数名":值。参数名与参数个数一定要与后台函数的参数名及参数个数完全一致
                    "pageCount": pageCount,
                    "curPage":curPage,
                }),
                async: true,
                success: function (result) {
                    setContainer(result.d);
                },
                error: function () {
                    setContainer('ERROR!');
                }
            });

        }

        // 换页
        function toPage(num) {
            curPage = num;
            getPager();
        };

        // 跳转到第几页
        function findPage() {
            var goNo = $("#goToPage").val();
            if (goNo != "") {
                toPage(goNo);
            }
        };

        //检查输入的页数是否符合要求
        function checkPageNo_() {
            var pageNo_ = $("#goToPage").val();
            var pageCount_ = "<%=pageCount%>";
            if (!(/(^[1-9]\d*$)/.test(pageNo_)) || parseInt(pageNo_) <= 0 || parseInt(pageNo_) > parseInt(pageCount_)) {
                $("#goToPage").val("");
            }
        };

    </script>
</html>

 

其后台是这样的：

 

Test1.aspx.cs

using DpdsSystem.DBO;
using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.Services;
using System.Web.UI;
using System.Web.UI.WebControls;

namespace Test.AJAXJQ分页
{
    public partial class Test1 : System.Web.UI.Page
    {
        public int recordCount = 0;
        public int recordCountPerPage = 5;
        public int pageCount = 0;
        protected void Page_Load(object sender, EventArgs e)
        {
            getRecordCount();
            getrecordCountPerPage();
            getPageCount();
        }
        //获得数据库总记录数 
        public void getRecordCount() //次函数需要访问数据库，应该都会，实在不会就给recordCount 直接赋个值
        {
            //string sql = "select * from student";
            //ClsDB cls = new ClsDB(); 
            //recordCount = cls.getRecordCount(sql);
            recordCount = 26;
        }
        // 获得每页记录数
        public void getrecordCountPerPage()
        {
            recordCountPerPage = 5;
        }
        //获得总页数
        public void getPageCount()
        {
            pageCount = (recordCount + recordCountPerPage - 1) / recordCountPerPage;
        }
        [WebMethod]
        public static string getPager(string recordCount, string pageCount, string curPage)
        {

            testPager.createPager pagenation = new testPager.createPager();
            string pagerStr = pagenation.pager(Convert.ToInt32(curPage), Convert.ToInt32(recordCount), Convert.ToInt32(pageCount));
            return pagerStr;
        }
    }
}