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;
        }
    }
}