使用jQuery實(shí)現(xiàn)網(wǎng)頁分頁功能的完整方案
更新時(shí)間：2025年12月24日 09:22:53 作者：Можно
在網(wǎng)頁開發(fā)中,當(dāng)數(shù)據(jù)量較大時(shí),分頁展示是提升用戶體驗(yàn)的核心手段之一,它能避免一次性加載大量數(shù)據(jù)導(dǎo)致的頁面卡頓,同時(shí)讓用戶更高效地定位所需內(nèi)容,所以本文給大家介紹了使用jQuery實(shí)現(xiàn)網(wǎng)頁分頁功能的完整方案,需要的朋友可以參考下
引言
在網(wǎng)頁開發(fā)中，當(dāng)數(shù)據(jù)量較大時(shí)，分頁展示是提升用戶體驗(yàn)的核心手段之一。它能避免一次性加載大量數(shù)據(jù)導(dǎo)致的頁面卡頓，同時(shí)讓用戶更高效地定位所需內(nèi)容。
一、需求分析：一個(gè)合格分頁器該有哪些功能？
在動(dòng)手編碼前，我們先明確分頁器的核心需求，避免開發(fā)過程中出現(xiàn)功能遺漏：
① 數(shù)據(jù)展示：每頁展示固定數(shù)量的數(shù)據(jù)，支持動(dòng)態(tài)加載
② 基礎(chǔ)導(dǎo)航：包含上一頁、下一頁按鈕，當(dāng)前頁禁用對應(yīng)按鈕并添加禁用樣式
③ 頁碼導(dǎo)航：顯示當(dāng)前頁附近的頁碼，首尾頁始終可見，中間用省略號(hào)優(yōu)化顯示
④ 快捷跳轉(zhuǎn)：提供首頁、尾頁快捷按鈕，支持輸入頁碼手動(dòng)跳轉(zhuǎn)
⑤ 交互反饋：當(dāng)前頁頁碼高亮顯示，鼠標(biāo)懸浮有hover效果，輸入無效頁碼時(shí)給出提示
⑥ 擴(kuò)展性：支持配置每頁顯示數(shù)量、是否顯示跳轉(zhuǎn)功能等參數(shù)
二、分步實(shí)現(xiàn)：從結(jié)構(gòu)到功能的完整開發(fā)
1. 頁面結(jié)構(gòu)搭建（HTML）
頁面主要分為三個(gè)部分：標(biāo)題說明區(qū)、數(shù)據(jù)展示區(qū)和分頁器容器。數(shù)據(jù)展示區(qū)和分頁器容器將通過jQuery動(dòng)態(tài)填充內(nèi)容。
<div class="container">
<h1>jQuery 分頁器模板</h1>
<p>這是一個(gè)簡單的分頁器實(shí)現(xiàn),使用jQuery動(dòng)態(tài)加載和顯示數(shù)據(jù)。</p>
<!-- 插入的鏈接 -->
<div id="data-container">
<!-- 數(shù)據(jù)將在這里動(dòng)態(tài)加載 -->
</div>
<div class="pagination" id="pagination">
<!-- 分頁鏈接將在這里動(dòng)態(tài)生成 -->
</div>
</div>2. 樣式美化（CSS）
為了讓分頁器更美觀且具有良好的交互體驗(yàn)，我們需要設(shè)置基礎(chǔ)樣式、分頁器樣式以及各種狀態(tài)下的樣式（如激活態(tài)、禁用態(tài)、hover態(tài)）。
<style>
body {
font-family: Arial, sans-serif;
margin: 20px;
line-height: 1.6;
}
.container {
max-width: 800px;
margin: 0 auto;
}
.data-item {
padding: 10px;
border-bottom: 1px solid #eee;
}
.pagination {
margin-top: 20px;
text-align: center;
}
.pagination a {
display: inline-block;
padding: 0px 7px;
margin: 0 4px;
border: 1px solid #ddd;
text-decoration: none;
color: #333;
border-radius: 4px;
}
.pagination a.active {
background-color: #4f88e1;
color: white;
border: 1px solid #4f88e1;
}
.pagination a:hover:not(.active) {
background-color: #ddd;
}
.pagination a.disabled {
color: #aaa;
pointer-events: none;
cursor: default;
}
.pagination span {
margin: 0 4px;
}
.pagination span {
font-size: 14px;
}
.page-jump-go {
font-size: 14px;
}
</style>3. 核心邏輯實(shí)現(xiàn)（jQuery）
這部分是分頁器的核心，主要包括數(shù)據(jù)加載、分頁初始化、頁碼更新、頁面切換等功能。我們將按“數(shù)據(jù)準(zhǔn)備→初始化→核心功能”的順序逐步實(shí)現(xiàn)。
3.1 全局變量與數(shù)據(jù)加載
定義全局變量存儲(chǔ)分頁相關(guān)配置和數(shù)據(jù)，通過AJAX請求加載模擬數(shù)據(jù)（實(shí)際項(xiàng)目中替換為后端接口）。
// 模擬數(shù)據(jù) - 實(shí)際應(yīng)用中可以從服務(wù)器獲取
var allData = [];
// 分頁設(shè)置
var currentPage = 1;
var perPageItem = 10;
var totalPages = 0;
var showJump = true;
// AJAX請求數(shù)據(jù)
$.ajax({
url: './js/06-分頁練習(xí).json',
type: 'GET',
dataType: 'json',
success: function (data) {
allData = data; // 保存數(shù)據(jù)
totalPages = Math.ceil(allData.length / perPageItem);
initPagination(); // 初始化分頁
},
error: function (err) {
console.log(err);
}
});3.2 分頁初始化函數(shù)
初始化函數(shù)是入口，主要完成“更新分頁鏈接”和“加載當(dāng)前頁數(shù)據(jù)”兩個(gè)核心操作。
// 初始化分頁
function initPagination() {
updatePaginationLinks();
loadPageData(currentPage);
}3.3 數(shù)據(jù)加載函數(shù)
根據(jù)當(dāng)前頁碼和每頁顯示數(shù)量，從所有數(shù)據(jù)中截取對應(yīng)片段并渲染到頁面。
// 加載指定頁的數(shù)據(jù)
function loadPageData(page) {
var startIndex = (page - 1) * perPageItem;
var endIndex = startIndex + perPageItem;
var pageData = allData.slice(startIndex, endIndex);
var $container = $("#data-container");
$container.empty();
$.each(pageData, function (index, item) {
$container.append('<div class="data-item">' + item + '</div>');
});
}
3.4 分頁鏈接更新函數(shù)
這是分頁器視覺展示的核心，動(dòng)態(tài)生成首頁、上一頁、頁碼、下一頁、尾頁及跳轉(zhuǎn)組件，根據(jù)當(dāng)前頁碼調(diào)整樣式（如激活態(tài)、禁用態(tài)）。
// 更新分頁鏈接
function updatePaginationLinks() {
var $pagination = $("#pagination");
$pagination.empty();
// 回到首頁按鈕
$pagination.append('<a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" class="page-link" data-page="1">?</a>');
// 上一頁按鈕
var prevDisabled = currentPage === 1 ? 'disabled' : '';
$pagination.append('<a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" class="page-prev ' + prevDisabled + '">上一頁</a>');
// 中間頁碼按鈕
var startPage = Math.max(1, currentPage - 2);
var endPage = Math.min(totalPages, currentPage + 2);
// 顯示省略號(hào)
if (startPage > 1) {
$pagination.append('<a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" class="page-link" data-page="1">1</a>');
if (startPage > 2) {
$pagination.append('<span>...</span>');
}
}
// 顯示頁碼
for (var i = startPage; i <= endPage; i++) {
var activeClass = i === currentPage ? 'active' : '';
$pagination.append('<a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" class="page-link ' + activeClass + '" data-page="' + i + '">' + i + '</a>');
}
// 添加頁碼
if (endPage < totalPages) {
if (endPage < totalPages - 1) {
$pagination.append('<span>...</span>');
}
$pagination.append('<a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" class="page-link" data-page="' + totalPages + '">' + totalPages + '</a>');
}
// 下一頁按鈕
var nextDisabled = currentPage === totalPages ? 'disabled' : '';
$pagination.append('<a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" class="page-next ' + nextDisabled + '">下一頁</a>');
// 跳轉(zhuǎn)到尾頁按鈕
$pagination.append('<a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" class="page-link" data-page="' + totalPages + '">?</a>');
// 總共頁數(shù)
$pagination.append('<span class="page-total">共 ' + totalPages + ' 頁</span>');
// 跳轉(zhuǎn)按鈕
// 跳轉(zhuǎn)插件 - 根據(jù)配置決定是否顯示
if (typeof showJump !== 'undefined' && showJump === true) {
createJumpPlugin($pagination);
}
}
// 跳轉(zhuǎn)插件
function createJumpPlugin($container) {
$container.append('<span class="page-jump">跳至</span>'
+ '<input type="number" class="page-jump-input" min="1" max="' + totalPages + '" value="' + '">'
+ '<span class="page-jump-text">頁</span>'
+ '<button class="page-jump-btn">GO</button>');
}3.5 事件處理
// 分頁點(diǎn)擊事件
function bindPageClickEvent() {
$(document).on('click', '.page-link', function (e) {
e.preventDefault();
currentPage = parseInt($(this).data('page'));
loadPageData(currentPage);
updatePaginationLinks();
});
// 上一頁
$(document).on('click', '.page-prev', function (e) {
if (!$(this).hasClass('disabled')) {
e.preventDefault();
currentPage--;
loadPageData(currentPage);
updatePaginationLinks();
}
});
// 下一頁
$(document).on('click', '.page-next', function (e) {
if (!$(this).hasClass('disabled')) {
e.preventDefault();
currentPage++;
loadPageData(currentPage);
updatePaginationLinks();
}
});
// 跳轉(zhuǎn)到指定頁
$(document).on('click', '.page-jump-btn', function (e) {
e.preventDefault();
var $input = $('.page-jump-input');
var page = parseInt($input.val());
// 驗(yàn)證輸入值
if (isNaN(page) || page < 1 || page > totalPages) {
alert('請輸入有效的頁碼 (1-' + totalPages + ')');
return;
}
currentPage = page;
loadPageData(currentPage);
updatePaginationLinks();
});
// 支持回車鍵跳轉(zhuǎn)
$(document).on('keypress', '.page-jump-input', function (e) {
if (e.which === 13) { // 回車鍵
$('.page-jump-btn').click();
}
});
}
bindPageClickEvent()到此這篇關(guān)于使用jQuery實(shí)現(xiàn)網(wǎng)頁分頁功能的完整方案的文章就介紹到這了,更多相關(guān)jQuery網(wǎng)頁分頁功能內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
相關(guān)文章
JQuery 綁定事件時(shí)傳遞參數(shù)的實(shí)現(xiàn)方法
JQuery 綁定事件時(shí)傳遞參數(shù)的實(shí)現(xiàn)方法，需要的朋友可以參考下。2009-10-10
深入分析jQuery的ready函數(shù)是如何工作的(工作原理)
這篇文章主要介紹了jQuery的ready函數(shù)是如何工作的,深入分析了jQueryready函數(shù)的運(yùn)作流程及相應(yīng)的工作原理,需要的朋友可以參考下2015-12-12
jQuery實(shí)現(xiàn)的左右移動(dòng)焦點(diǎn)圖效果
這篇文章主要介紹了jQuery實(shí)現(xiàn)的左右移動(dòng)焦點(diǎn)圖效果,涉及jQuery結(jié)合時(shí)間函數(shù)響應(yīng)鼠標(biāo)事件動(dòng)態(tài)操作頁面元素樣式的相關(guān)技巧,需要的朋友可以參考下2016-01-01
Jquery讓form表單異步提交代碼實(shí)現(xiàn)
這篇文章主要介紹了Jquery讓form表單異步提交代碼實(shí)現(xiàn),文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友可以參考下2019-11-11
extend是常用的參數(shù)處理函數(shù)，特別是對默認(rèn)值的使用，但是在使用過程中，默認(rèn)值往往是不能被改變的,需要的朋友可以參考下2014-08-08
jquery判斷至少有一個(gè)checkbox被選中的方法
這篇文章主要介紹了jquery判斷至少有一個(gè)checkbox被選中的方法,涉及jQuery操作checkbox控件的相關(guān)技巧,需要的朋友可以參考下2015-06-06
基于jquery實(shí)現(xiàn)ajax無刷新評論
這篇文章主要為大家詳細(xì)介紹了基于jquery實(shí)現(xiàn)ajax無刷新評論的相關(guān)資料，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考2016-05-05
jQuery EasyUI API 中文文檔 - MenuButton菜單按鈕使用介紹
jQuery EasyUI API 中文文檔 - MenuButton菜單按鈕使用介紹，使用jQuery EasyUI的朋友可以參考下。2011-10-10
CSS3結(jié)合jQuery實(shí)現(xiàn)動(dòng)畫效果及回調(diào)函數(shù)的實(shí)例
下面小編就為大家分享一篇CSS3結(jié)合jQuery實(shí)現(xiàn)動(dòng)畫效果及回調(diào)函數(shù)的實(shí)例，具有很好的參考價(jià)值，希望對大家有所幫助。一起跟隨小編過來看看吧2017-12-12
jQuery插件jRumble實(shí)現(xiàn)網(wǎng)頁元素抖動(dòng)
jRumble是jquery的插件，可以讓你選擇的元素抖動(dòng)。 調(diào)用時(shí)只需一句代碼即可，有些抖動(dòng)效果還挺可愛，可自定義的抖動(dòng)效果，十分的炫酷，有需要的小伙伴可以參考下。2015-06-06