jQuery和ajax實現簡單的分頁（未完成）

Write By Monkeyfly

以下內容均爲原創，如需轉載請註明出處。

該博客是去年寫的，當時只寫了一部分，截至目前還未完全寫完。

一定要注意：思路很重要，如果是第一次寫，先看一看標準示例是如何實現分頁的，在示例上用鼠標多點幾下，多操作幾下，熟悉一下分頁的用法，多動腦思考一下，然後就知道怎麼去實現了。

前提

現階段要對以前的代碼進行重構，再加上我之前也沒有寫過分頁的功能，於是就在原有代碼的基礎上進行重寫。
剛開始我也不會寫，我也只能是參考以前的寫法，在自己完全理解的基礎上進行重寫。
那如何進行下手呢？

原理分析

我用點擊地址簿圖標，獲取收寄件人地址信息的案例進行分析一下：

整個彈窗的結構：分爲四部分：標題、內容、頁腳以及 loading 部分。

底部分頁的結構：左右結構，分別是：左側的快速跳轉以及總頁數；右側的翻頁以及頁碼列表

左側的快速跳轉部分：
左側的分頁大小列表選擇部分：

點擊地址簿圖標後，向後臺發起請求，獲取收件人或寄件人的所有保存的地址信息。
注：在每次點擊地址簿圖標獲取數據前，記得要清空數據列表，以及將所有有變動的地方恢復默認（可以稱之爲初始化操作）。

 //要清空地址列表信息、頁碼選擇數字框、以及總頁數（這些都需要重新渲染）
 $(".addrbook-list").empty();
 $(".page-num-list").empty();
 $(".total-pages").text("");
 $(".layer-shade-addrbook").show();
 //最後，還要重置分頁大小的值（默認值爲2）
 $("#ipt_pageSize").val("2");

其實在第一次獲取數據時，就需要對數據進行 分頁的處理。因爲當前端拿到後臺返回的所有地址信息時，就會默認展示第一頁的數據。

//  第一次向後臺請求數據時，前臺傳遞給後臺的請求參數如下：
"data": {
  "currentPage":1,	// 當前頁數（要請求第幾頁的數據）
  "pageSize":2, 		// 分頁大小（即每頁要展示多少條數據）
  "type":"S",			// 要查詢的收寄件人類型
  "refreshTime":"2019-08-04 17:56:11"	// 當前時間戳
}

我們向後臺發送分頁的數據請求後，後臺除了會給我們返回相應的數據列表之外，返回的數據還應該包括什麼呢？肯定會包含分頁相關的信息：數據的總條數 record（或者 total，總之都是自定義的命名）、總頁數、分頁大小以及當前頁數。至於總頁數（所有的數據總共能分多少頁） 完全是由 分頁大小 pageSize（即每頁展示幾條數據） 決定的，即totalPages = Math.ceil(record / pageSize)。
所以，在我們第一次向後臺請求數據時，就要和後端約定好第一次請求數據要傳遞的參數有哪些。：

當前頁數 currentPage（即要獲取哪一頁的數據）【如果不傳的話，後臺會默認返回第一頁的數據；或者第一次獲取時向後臺傳個常量：1，用於表示獲取第一頁的數據】
分頁大小 pageSize （即一頁展示幾條數據）【如果不傳的話，後臺會有自己設定的默認值返回給前端；這個參數是後面計算總頁數要用的。】
- 注：
- 1.畢竟後臺是採用100%不信賴前端的原則。前端傳遞給後臺的數據的，無論傳的什麼值，後臺都會在原有基礎上加上一層邏輯判斷。這也是爲了安全考慮。
- 2.總頁數一般後臺都會返回給前臺，如果未返回需要前臺自己計算。
人物類型 type （是獲取寄件人還是收件人的地址信息）【必須項】
當前時間戳 timeStamp （傳遞什麼類型或者什麼格式的時間，這個前後端協商好就行）
綜上所述，每次獲取數據進行分頁時，需要傳遞4個參數，分別是：

//4個參數都不是寫死的，都是每次傳遞時動態變化的
var data = {
	"currentPage":currentPage,
	"pageSize":pageSize,
	"type":type,
	"timeStamp":time
};

那麼，我們試着想一想，後臺會給我們返回什麼樣的數據呢？

當前頁的所有數據 dataList
分頁大小 pageSize
總的數據條數record
當前頁數 currentPage
總頁數 totalPages（若後臺未返回需要前端自行計算，當然計算方法也非常簡單）

後臺返回給前臺的數據如下圖所示：

接下來，就要寫第一次獲取數據之後的邏輯部分了。從後臺拿到數據之後，前端要做哪些事情呢？【根據自己項目需求的實現來寫，不同的實現，邏輯處理也不一樣。此處我按照我們項目中的需求來寫】
從後臺拿到數據之後，要做 3 件事情：

根據獲取到的數據 dataList 來動態的渲染當前頁的數據列表。
根據獲取到的 總記錄條數record 和 分頁大小 pageSize，計算出 總頁數totalPages。

//總頁數 = 總條數 / 分頁大小（向上取整）
var totalPages = Math.ceil(total/pageSize);
$(".total-pages").text(totalPages);

具體如下圖所示：

根據總頁數totalPages生成分頁條（可以設定分頁條中最多生成幾個分頁數字框，最大數量可以自己進行控制，我們這裏規定最多不能超過 5 個）【所以，此處需要進行判斷，限制一下分頁條中數字框的個數】

//注：總頁數 = 分頁數字框個數，且最多不超過5個
if(totalPages > 5){
     for(var j=1;j<=5;j++){
         $('<li class="item-page-num">'+j+'</li>').appendTo($('.page-num-list'));
     }
 }else{
     for(var j=1;j<=totalPages;j++){
         $('<li class="item-page-num">'+j+'</li>').appendTo($('.page-num-list'));
     }
 }

然後給每個分頁數字框註冊點擊事件。

 $('.item-page-num').on('click',getInfoByPageNum);

現在首頁（第一頁）要展示的數據已經獲取到了，接下來要做的就是切換頁碼的功能：當點擊每個分頁數字框中的頁碼時，如何獲取對應頁碼的相關地址數據信息。
和第一次獲取數據的接口一樣，只是傳的參數不同罷了。【這次主要是當前頁數 currentPage 和分頁大小 pageSize】

傳遞的參數如下圖所示：

//4個參數都不是寫死的，都是每次傳遞時動態變化的
var data = {
	"currentPage":currentPage,//當前頁需要點擊時動態獲取，既然發生變化了，就要動態傳遞。
	"pageSize":pageSize,//分頁大小同樣也要傳給後臺，既然沒有發生變化就傳遞默認值。
	"type":type,
	"timeStamp":time
};

先改變所選數字框的樣式 設置類名爲 .current 的樣式（即取消之前頁碼的選中狀態，設置當前已選頁碼的選中狀態）
然後獲取當前所點擊分頁數字框中的頁數 currentPage 並保存（當前點擊第幾頁，該數據要傳給後臺）
再獲取當前的分頁大小 pageSize（每頁放幾條數據，也要傳給後臺）
然後根據後臺返回的數據動態渲染地址數據信息 addrbook-list
注：切換頁碼時只需要重新渲染地址數據信息並更新頁碼的選中狀態即可，其他地方不用改動（即分頁數字框 page-num-list不用像第一次獲取數據時重新創建一遍，只改變頁面的選中狀態即可）。

然後要做的事情就是：分頁大小列表的點擊事件（快速跳轉頁碼的功能）。即點擊切換不同的分頁大小 pageSize，再獲取相應的數據，進行地址簿列表的渲染和分頁信息的重建。

問：爲什麼此處要重建分頁信息？
答：因爲總的數據條數 record 不變，而分頁大小 pageSize 改變了，所以總頁數也改變了。

注意下面的區別：

如果只是點擊切換頁數，則不需要重建分頁數字框。
如果是點擊切換分頁大小，或者第一次獲取地址信息時，則必須清空分頁大小數字框，然後根據計算出來的總頁數進行重建。

最後要實現的就是翻頁操作了。【難點】

我們要知道翻頁分爲兩部分：前翻頁和後翻頁，即平時所說的：切換至上一頁、切換至下一頁。
注意：這裏的上一頁和下一頁，說明一次性只能上翻一頁或者下翻一頁。如果我們想一次性上翻或者下翻多頁呢，應該怎麼去做呢？
其實道理都是一樣的，只是傳遞的參數不同罷了。假設我們定義一個專門用於點擊翻頁的方法 pageTurning()， 在每次進行翻頁操作時，通過傳遞參數值的不同來控制上翻頁還是下翻頁，以及一次翻多少頁。
我們可以在每次翻頁時，給 pageTurning() 翻頁方法傳遞當前需要翻頁的頁碼值（這裏用 n 表示），即 pageTurning(n) 來控制一次要翻的頁數。
那麼，上翻頁和下翻頁如何體現呢？我們只需要控制 參數 n 的數值類型即可，即 正數表示下翻一頁，負數表示上翻一頁。
這裏需要特別說明一下：剛開始實現翻頁操作的時候，這塊的想法有問題：我可能被之前的寫法誤導了，誤認爲翻頁操作只是純上下翻頁的動作，即在點擊翻頁按鈕後前後切換頁碼，僅此而已，而並沒有頁碼值選中狀態的改變與數據的重新渲染。

翻頁操作想法描述：

// *1*　表示當前頁的選中狀態
// |...| 表示當前展示的頁碼列表範圍，即最多隻展示5頁的數據
// () 表示翻頁之後不在頁碼列表範圍的頁碼，也就是被翻動過的頁碼
翻頁前： 				|*1* 2  3  4  5 |
下翻一頁後： 	 (*1*)	| 2  3  4  5  6 |
下翻一頁後： (*1*) (2)	| 3  4  5  6  7 |
// 由上可見：執行翻頁操作後，此時並未做點擊切換頁碼的操作，那麼最初的選中頁狀態依然保留，翻頁操作只是單純的前後翻動頁碼列表（整個頁面列表中的頁碼值都 +1 或者 -1），即在當前所展示的頁碼列表範圍內頁碼值不斷進行增減變化。
// 如果在執行翻頁操作後，做了切換頁碼的操作，即點擊了某頁碼，狀態會變成如下這樣：
點擊選中第5頁：(1) (2)	| 3  4  *5*  6  7 |
// 此時，頁碼的選中狀態纔會發生變化。也就是說，觸發頁碼選中狀態發生變化的操作只有在點擊某個頁碼值時，而上下翻頁並不會直接改變頁碼的選中狀態。

以上就是剛開始時做翻頁的想法，當時也不知道，但現在看來這種想法很明顯是不對的。而且錯的太離譜了，沒有和實際相結合，而且自己寫出來的翻頁操作比較反人類，還是要參考標準的實現效果來寫，不要像我一樣憑空想象應該怎麼去實現，這麼做是不對的。

正確的實現效果應該是下面這樣的：

標準基礎分頁的實現：

// *1*　表示當前頁的選中狀態
// |...| 表示當前展示的頁碼列表範圍，即最多隻展示5頁的數據
翻頁前： 	| *1* 2  3  4  5 |
下翻一頁後： |  1 *2* 3  4  5 |
下翻一頁後： |  1  2 *3* 4  5 |
// 每翻動一頁，頁碼的選中狀態就應該設置爲當前翻頁後的頁碼。
// 也就是說，頁碼值的選中狀態從 最初選中的 1 變爲 2 再變爲 3。
// 注意：此時的頁碼值並不會發生變化，也就是說向後一頁真的只是改變了頁碼的選中狀態並切換到了下一頁，而非是整個頁碼的列表都發生變化，重新渲染，這與我剛開始的翻頁想法確實有很大出入。

標準更多分頁的實現：

而我的更多分頁的實現，則是將 向後5頁 與 向前5頁，放在了分頁列表的兩端。而且思路也與標準的分頁思路相差甚遠。

恍然大悟，這纔是正確的打開方式！！！真不知道以前是怎麼想的，現在看來是之前是真傻。

下面就說一說，之前翻頁的實現思路吧：（別被我的思路誤導了，感覺我這是劍走偏鋒）

首先，無論是向前還是向後翻頁，在我自己看來，當執行翻頁操作後，會發生一件神奇的事情：當前頁碼列表中的每一個頁碼值都會因爲翻頁操作而發生數值上的變化，即每個頁碼值都會根據待翻動的頁數執行 +N 和 -N 操作。我將這個操作都統一爲了 + 操作，即 N 可正可負。
即翻頁數 n 爲正數表示：向後翻頁；n 爲負數表示：向前翻頁。

// *1*　表示當前頁的選中狀態
// |...| 表示當前展示的頁碼列表範圍，即最多隻展示5頁的數據
// () 表示翻頁之後不在頁碼列表範圍的頁碼，也就是被翻動過的頁碼
翻頁前： 				|*1* 2  3  4  5 |
下翻一頁後： 	 (*1*)	| 2  3  4  5  6 |
下翻一頁後： (*1*) (2)	| 3  4  5  6  7 |

先拿到當前頁碼列表中左右兩端的兩個頁碼值，即當前頁碼列表展示範圍內的最小頁碼值 （對應左邊的頁碼值1） 和最大頁碼值 （對應右邊的頁碼值5）。
這麼做的目的是什麼呢？
- 因爲要計算出剩餘可翻動的頁數 remainPages。 假設翻頁前的頁碼列表爲： 4 5 6 7 8，那麼就需要分別計算出：
- 上翻頁的剩餘可翻動頁數： 如果執行上翻 N 頁的操作，還剩餘多少頁可以被向上翻動；
  - 或者理解爲：前面還剩多少頁可以被翻動（被翻到底）。
  - remainPages_prev = 當前頁碼列表中的第一個頁碼值4 - 1 = 3
- 下翻頁的剩餘可翻動頁數： 如果執行下翻 N 頁的操作，還剩餘多少頁可以被向下翻動；
  - 或者理解爲：後面還剩多少頁可以被翻動（被翻到底）。
  - remainPages_next = 總頁數 total - 當前頁碼列表中的最後一個頁碼值8，假設總頁數爲 10，則 remainPages_next = 10 - 8 = 2
爲什麼要計算剩餘頁數呢？
- 因爲一旦得到了上翻頁或者下翻頁的剩餘頁數 remainPages ，就可以根據要翻動的指定頁數（即向前或向後翻動 N 頁），來判斷出剩餘的頁數 remainPages 是否滿足待上下翻動的頁數 N。
- 在這裏，我們假設要向前或者向後翻動 5 頁，如果此時向前翻動的話，本應該向前翻 5 頁，但是因爲向前只剩餘 3 頁可翻動，所以實際向前翻動的頁數 = 剩餘可向前翻動的頁數 3。而如果此時向後翻動的話，因爲向後只剩餘 2 頁可翻動，所以實際向後翻動的頁數 = 剩餘可向後翻動的頁數 2。
然後我們就可以根據剩餘可翻動的頁數 remainPages 與待翻頁數 N 的關係，計算出實際的翻頁數 actualPages。
- 也就是說，將剩餘可翻動的頁數 remainPages 和當前待翻的頁數 N 作比較，來計算出剩餘的頁數是否滿足向前或者向後翻 N 頁的要求。
- 如果不滿足就說明：當前無法繼續按照指定的翻頁數 N 來向前或向後翻頁了，因爲剩下的頁數根本不足以翻動指定的頁數 N了，所以只能是剩多少頁就翻動多少頁。
  - 如果 剩餘頁數 >= 待翻頁數，纔可以翻頁至指定的頁數
  - 否則，剩幾頁就翻幾頁（最小限度是第一頁，最大限度是最後一頁）
最後，渲染整個頁碼列表中的頁碼值
- 上翻，是對實際要翻動的頁碼值執行減 - 操作，即：當前頁碼列表中每一個頁碼值 - 實際的翻頁數
- 下翻，則是對實際要翻動的頁碼值執行加 + 操作，即： 當前頁碼列表中每一個頁碼值 + 實際的翻頁數

代碼實現如下：

/**
 * 定義一個空對象 Page，用於進行翻頁操作
 * 該對象性有一個屬性：curSelectedPageNum，用於保存翻頁前頁數列表中已選擇的頁碼值
 * 注：
 * 1.對翻頁而言，如果翻頁之前點擊選擇了其他頁碼，那麼進行翻頁操作時該頁碼的選擇狀態必須一直保留。
 * 2.不能說翻頁前選中了第3頁，翻頁之後再回到第3頁，發現它的選中狀態沒了，那就不對了。
 * 3.只要是翻頁前選中了某一頁，無論是上翻還是下翻期間，該頁的選中狀態必須時刻保留着。除非選擇切換了其他頁。
 * 故定義了該全局屬性，用於保存翻頁前已選擇的頁碼值。
 * 4.在每次打開地址簿彈窗時，就要將保存的頁碼值清除。以防止關閉彈窗後，再次打開彈窗進行翻頁時，之前的頁碼選中狀態依舊保留。
 */
var Page = {},
	Page.curSelectedPageNum="";
/**
 * 翻頁操作：適用於上翻頁和下翻頁，區別在於第三個參數
 * @param {總頁數文本的類名} totalPagesEle 
 * @param {頁碼列表中每個頁碼選項的類名} PageNumItemEle 
 * @param {翻頁數} n 正數：向後翻頁；負數：向前翻頁
 */
Page.pageTurning = function (totalPagesEle,PageNumItemEle,n){
    var $pageNumItem = $(PageNumItemEle),
        totalPages = $(totalPagesEle).text(),//獲取當前總頁數的值
        curMinpageNum = $pageNumItem.first().text(),//頁數列表中的首位頁碼值（上翻頁用）
        curMaxpageNum = $pageNumItem.last().text();//頁數列表中的末位頁碼值（下翻頁用）
    //翻頁之前首先判斷一下，頁碼列表中是否存在已選頁（是單純的翻頁還是選擇某頁之後進行的翻頁操作）
    var curSelectedPage = $pageNumItem.filter(".current");
    if(curSelectedPage.length !==0 ){//如果存在所選頁，則需要保存當前所選頁的頁碼值，並重置其樣式
        Page.curSelectedPageNum = curSelectedPage.text();
        curSelectedPage.removeClass("current");
    }
    //然後獲取剩餘頁數
    var remainPages;
    if(n<0){//如果是上翻頁：剩餘頁數 = 當前頁數列表中的最小頁碼值 - 1
        remainPages = curMinpageNum - 1;
    }else{//如果是下翻頁：剩餘頁數 = 總頁數 - 當前頁數列表中的最大頁碼值
        remainPages = totalPages-curMaxpageNum;
    }
    //接下來要根據剩餘頁數計算出實際的翻頁數;（注意：n取絕對值）
    var actualPages;
    if(remainPages >= Math.abs(n)){// 如果剩餘頁數 >= 待翻頁數，纔可以翻頁至指定的頁數
        actualPages = Math.abs(n);
    }else{//否則剩幾頁就翻幾頁（最小限度是第一頁，最大限度是最後一頁）
        actualPages = remainPages;
    }
    //最後渲染頁數列表中的頁碼值（上翻是減，下翻則是加）
    $pageNumItem.each(function(){
        var curPageNum = parseInt($(this).text());
        if(n<0){//上翻頁：減去相應的頁碼值
            $(this).text(curPageNum - actualPages);
        }else{//下翻頁：加上相應的頁碼值
            $(this).text(curPageNum + actualPages);
        }
    });
    //渲染完頁碼值之後，要判斷之前是否存在所選頁。如果存在的話，則需要渲染翻頁後的頁碼狀態
    if(Page.curSelectedPageNum){
        $pageNumItem.each(function(){
            if(Page.curSelectedPageNum == $(this).text()){//渲染後的頁碼列表，需保持渲染前的相同頁碼的樣式
                $(this).addClass("current");
            }
        });
    }
}

/**
 * 渲染地址簿列表及分頁信息
 * @param {當前頁數} currentPage 
 * @param {分頁大小} pageSize 
 * @param {收寄件人類型} type 
 * @param {判斷是不是要渲染的批量寄件}  many 是：Y  否：N
 * 注：
 * 1.切換頁碼只需要重新渲染地址信息即可，其他地方不用動。
 */
 function renderAddrbookInfo(currentPage,pageSize,type){
  	if(many == "Y"){//如果是批量寄件
       //渲染之前要清空全選複選框的選中狀態
       $("#batchSelectAll").removeClass("selected");
    }
    //清空分頁大小數字框的內容
    $(".page-num-list").empty();
    //並清空地址列表信息
    $(".addrbook-list").empty();
    //顯示加載等待動畫
    $(".layer-loading").show();
    //獲得當前的時間
    var time = getFormatTime("yyyy-MM-dd HH:mm:ss");
    //向後臺傳輸的數據：當前頁數（默認是第1頁）、分頁大小、收寄件人類型、當前時間
	var data = {"currentPage":currentPage,"pageSize":pageSize,"type":type,"refreshTime":time};
    $.ajax({ // 自己封裝的 ajax　方法
        action:"xxxx",　// 請求接口名稱
        version:"V1.0",
        data:data,
        callback:function(res){
            if(res.result){
                //隱藏加載等待動畫
                $(".layer-loading").hide();
                var data = res.data,
                    addrInfoList = data.list,
                    total = data.record,//獲取到的地址信息的總條數
                    curPage = data.currentPage;//當前頁數
                    result = "";
                //首先，渲染發件人地址信息列表
                var imgClass;
                if(many == "Y"){//如果是批量寄件，存在多選操作，首先要在列表頭部追加一個全選的複選框，其次列表中的每一項前都要有一個複選框
                    if($(".addrbook-head>.img-select").length<1){
                        $(".addrbook-head").prepend('<i class="img-select img-select-m" id="batchSelectAll"></i>');
                    }
                    $("#batchSelectAll").off("click",batchSelectAll).on("click",batchSelectAll);
                    imgClass = "img-select-m";
                }else{//如果是預約寄件，每一項只能單選，所以這裏去掉頭部的全選複選框，將每一項前的複選框修改爲單選按鈕
                    imgClass = "img-select-s";
                    $(".addrbook-head .img-select-m").remove();
                }
                //渲染地址列表信息
                for(var i=0;i<addrInfoList.length;i++){
                    result += '<li class="item-addr-info" οnclick="selectedAddrbookInfo(this,\''+many+'\')" data-code="' +addrInfoList[i].PROVINCE_CODE+','+addrInfoList[i].CITY_CODE+','+addrInfoList[i].AREA_CODE+ '">'+
                                    '<i class="img-select '+imgClass+ '"></i>'+
                                    '<span class="info-name">' + addrInfoList[i].CUSTOMER_NAME+ '</span>'+
                                    '<span class="info-tel">' +addrInfoList[i].MOBILE+ '</span>'+
                                    '<span class="info-address">' +addrInfoList[i].PROVINCE_NAME+' '+addrInfoList[i].CITY_NAME+' '+addrInfoList[i].COUNTY_NAME+' '+addrInfoList[i].ADDRESS+ '</span>'+
                                '</li>';
                }
                $(".addrbook-list").append(result);
                //然後，計算出總頁數（totalPages），  總頁數 = 總條數 / 分頁大小
                var totalPages = Math.ceil(total/pageSize);
                $(".total-pages").text(totalPages);
                //接下來，需要根據總頁數創建分頁數字框（注：總頁數 = 分頁數字框個數，且最多不超過5個）
                if(totalPages > 5){
                    if(curPage < 5){//如果當前所點擊的頁數 小於等於 5 ，從1開始創建頁碼數字框
                        for(var i=1;i<=5;i++){
                            if(i==curPage){//如果當前所渲染的數字框等於當前頁數，則添加已選擇狀態
                                $('<li class="item-page-num current">'+i+'</li>').appendTo($('.page-num-list'));
                            }else{
                                $('<li class="item-page-num">'+i+'</li>').appendTo($('.page-num-list'));
                            }
                        }
                    }else{//如果當前所點擊的頁數 大於 5，則從...開始創建頁碼數字框 
                        var remainder = curPage % 5;//當前頁數整除5後的餘數。可認爲是多出來的頁數。
                        if(remainder==0){//如果當前頁數是5的倍數，如10,15,20...，則從 當前頁-4 的頁數開始渲染數字框
                            for(var i=curPage-4;i<=curPage;i++){
                                if(i==curPage){//如果當前所渲染的數字框等於當前頁數，則添加已選擇狀態
                                    $('<li class="item-page-num current">'+i+'</li>').appendTo($('.page-num-list'));
                                }else{
                                    $('<li class="item-page-num">'+i+'</li>').appendTo($('.page-num-list'));
                                }
                            }
                        }else{//如果當前頁數不是5的倍數，如6,22,56...則從 (當前頁-多餘頁數)+1 的頁碼開始渲染，一直到 (當前頁-多餘頁數)+5 的頁碼處
                            if((curPage-remainder+5)<totalPages){//如果要渲染的最大頁碼未超出總頁數
                                for(var i=curPage-remainder+1;i<=curPage-remainder+5;i++){
                                    if(i==curPage){//如果當前所渲染的數字框等於當前頁數，則添加已選擇狀態
                                        $('<li class="item-page-num current">'+i+'</li>').appendTo($('.page-num-list'));
                                    }else{
                                        $('<li class="item-page-num">'+i+'</li>').appendTo($('.page-num-list'));
                                    }
                                }
                            }else{//如果要渲染的最大頁碼已超出總頁數
                                for(var i=totalPages-4;i<=totalPages;i++){
                                    if(i==curPage){//如果當前所渲染的數字框等於當前頁數，則添加已選擇狀態
                                        $('<li class="item-page-num current">'+i+'</li>').appendTo($('.page-num-list'));
                                    }else{
                                        $('<li class="item-page-num">'+i+'</li>').appendTo($('.page-num-list'));
                                    }
                                }
                            }
                        }
                    }
                }else{//如果總頁數 小於 5，就創建個數 等於總頁數 的數字框
                    for(var i=1;i<=totalPages;i++){
                        if(i==curPage){//如果當前所渲染的數字框等於當前頁數，則添加已選擇狀態
                            $('<li class="item-page-num current">'+i+'</li>').appendTo($('.page-num-list'));
                        }else{
                            $('<li class="item-page-num">'+i+'</li>').appendTo($('.page-num-list'));
                        }
                    }
                }
                //最後，給分頁數字框註冊點擊事件
                $('.item-page-num').on('click',getInfoByPageNum);
            }
        }
    });
}

未完待續…

jQuery和ajax實現簡單的分頁（未完成）

前提

原理分析

京東面試：如何進行JVM調優？

美團一面：項目中有 10000 個 if else 如何優化？想了半天，被問懵了！

Python 將PowerPoint (PPT/PPTX) 轉爲HTML

SQL優化-20231016

百度地圖JavaScript API 學習之創建標註

百度地圖JavaScript API 學習之根據IP定位

jQuery和ajax實現簡單的分頁（未完成）

使用jquery的load方法加載html頁面，但是html引入的js不生效

關於正則表達式無法匹配手機號的問題

https://yachay.unat.edu.pe/blog/index.php?comment_area=format_blog&comment_component=blog&comment_co

linux以太網驅動總結