jQuery Pagination 分頁插件增強版：新增首頁/尾頁/頁碼跳轉功能完整實戰

插件特性

• 基於 jQuery Pagination 二次開發，新增「首頁」「尾頁」「頁碼輸入跳轉」三大功能。
• 保留原插件核心參數：items_per_page、num_edge_entries、num_display_entries、callback。
• 相依：jquery.js、pagination.js、pagination.css。

資源下載

百度網盤：https://pan.baidu.com/s/1nvaq99R 密碼：9nfb (含增強版 JS/CSS)。

前端頁面整合

HTML 結構

<div class="clearbox">
  <div class="x-box">
    <h2><a>用戶列表</a></h2>
    <table id="listData"></table>
  </div>
  <div id="Pagination" class="pagination"></div> <!-- 分頁容器 -->
</div>

JavaScript 邏輯

<script type="text/javascript">
$(document).ready(function() {
    getDataList(0, null); // 初始化載入第 1 頁
});

var rows = 10;           // 每頁條數
var page = 1;            // 當前頁 (內部用)
var initFlag = true;     // 分頁插件只初始化一次

function getDataList(currPage, jq) {
    $.ajax({
        url: "page",
        type: "post",
        dataType: 'json',
        data: { rows: rows, page: currPage + 1 }, // 插件 currPage 從 0 開始，後端從 1 開始
        contentType: "application/x-www-form-urlencoded; charset=utf-8",
        success: function(response) {
            if (response.result && response.data && response.total > 0) {
                if (initFlag) {
                    $("#Pagination").pagination(response.total, {
                        items_per_page: rows,
                        num_edge_entries: 1,      // 邊緣顯示 1 頁
                        num_display_entries: 8,   // 主體顯示 8 頁
                        callback: getDataList     // 頁碼點擊回調
                    });
                    initFlag = false;
                }
                loadDataList(response.data);
            } else {
                $("#listData").html("<tr><td colspan='3'>暫無數據</td></tr>");
            }
        }
    });
}

function loadDataList(listData) {
    var html = "<tr class='t-header'>" +
        "<td>頭像</td>" +
        "<td>姓名</td>" +
        "<td>密碼</td>" +
        "</tr>";
    $("#listData").html(html); // 清空重建表頭

    for (var i = 0; i < listData.length; i++) {
        var n = listData[i];
        html = "<tr>" +
            "<td><img src='getphoto?unid=" + n.uuid +
            "' onerror=\"this.src='resources/img/default.png'\" " +
            "style='width:48px;height:48px;border-radius:48px;'/></td>" +
            "<td>" + n.username + "</td>" +
            "<td>" + n.password + "</td>" +
            "</tr>";
        $("#listData").append(html);
    }
}
</script>

後端分頁接口 (Spring MVC)

@ResponseBody
@RequestMapping("page")
public Map page(HttpServletRequest request) {
    int total = userService.getTotal();                    // 總記錄數
    int page = Integer.parseInt(request.getParameter("page")); // 當前頁 (1-based)
    int rows = Integer.parseInt(request.getParameter("rows")); // 每頁大小
    List data = userService.getCurrentPage((page - 1) * rows, rows);
    boolean result = (data != null && !data.isEmpty());

    Map map = new HashMap<>();
    map.put("data", data);
    map.put("total", total);
    map.put("result", result);
    return map;
}

效果展示

增強版核心修改點 (JS 內部)

• 在 draw() 方法中插入首頁/尾頁按鈕：<a class='first'>首頁</a>、<a class='last'>尾頁</a>。
• 新增跳轉輸入框：<input type='text' class='page-input'><button class='go-btn'>跳轉</button>。
• 綁定點擊事件：首頁 → selectPage(0)、尾頁 → selectPage(totalPages-1)、跳轉 → 解析輸入值並 selectPage(val-1)。
• CSS 新增 .first/.last/.page-input/.go-btn 樣式，保持原風格。

常見問題

總結

在 jQuery Pagination 基礎上增加首頁/尾頁/跳轉，僅需修改 JS 繪製邏輯與 CSS，零侵入後端接口。適用於傳統 jQuery + Spring MVC 專案快速構建完整分頁體驗，亦可作為前端分頁組件選型參考。

1. 上一篇文章： Java Vector 與 Enumeration 詳解：唯讀舊集合、枚舉遍歷與現代替代方案
2. 下一篇文章： Java 多線程核心剖析：Runnable vs Thread、start/run 機制、wait/notify/sleep、三線程交替打印 ABC 實戰

Java 綜合教學

Java 面向對象入門實戰：從類設計到計算器案例完整演示

案例需求 設計一個計算器類，具備： 兩個操作數（int a

Java Swing 入門：從零構建第一個桌面應用視窗

核心代碼（最小化可運行範例） {

LeetCode 6. Z 字形變換：雙指針模擬遍歷 O(n) 時間 O(n) 空間優雅解法

LeetCode 6. Z 字形變換：雙指針模擬遍歷 O(n

SpringMVC 異步文件上傳實戰：基於 ajaxFileUpload.js 與 iframe 方案詳解

SpringMVC 異步文件上傳實戰指南 在傳統 Web 開