目录
引言
一、需求分析：一个合格分页器该有哪些功能？
二、分步实现：从结构到功能的完整开发
1. 页面结构搭建（HTML）
2. 样式美化（CSS）
3. 核心逻辑实现（jQuery）
3.1 全局变量与数据加载
3.2 分页初始化函数
3.3 数据加载函数
3.4 分页链接更新函数
3.5 事件处理
引言
在网页开发中，当数据量较大时，分页展示是提升用户体验的核心手段之一。它能避免一次性加载大量数据导致的页面卡顿，同时让用户更高效地定位所需内容。
一、需求分析：一个合格分页器该有哪些功能？
在动手编码前，我们先明确分页器的核心需求，避免开发过程中出现功能遗漏：
① 数据展示
：每页展示固定数量的数据，支持动态加载
② 基础导航
：包含上一页、下一页按钮，当前页禁用对应按钮并添加禁用样式
③ 页码导航
：显示当前页附近的页码，首尾页始终可见，中间用省略号优化显示
④ 快捷跳转
：提供首页、尾页快捷按钮，支持输入页码手动跳转
⑤ 交互反馈
：当前页页码高亮显示，鼠标悬浮有hover效果，输入无效页码时给出提示
⑥ 扩展性
：支持配置每页显示数量、是否显示跳转功能等参数
二、分步实现：从结构到功能的完整开发
1. 页面结构搭建（HTML）
页面主要分为三个部分：标题说明区、数据展示区和分页器容器。数据展示区和分页器容器将通过jQuery动态填充内容。
jQuery 分页器模板
这是一个简单的分页器实现,使用jQuery动态加载和显示数据。
2. 样式美化（CSS）
为了让分页器更美观且具有良好的交互体验，我们需要设置基础样式、分页器样式以及各种状态下的样式（如激活态、禁用态、hover态）。
// 模拟数据 - 实际应用中可以从服务器获取
var allData = [];
// 分页设置
var currentPage = 1;
var perPageItem = 10;
var totalPages = 0;
var showJump = true;
// AJAX请求数据
$.ajax({
url: './js/06-分页练习.json',
type: 'GET',
dataType: 'json',
success: function (data) {
allData = data; // 保存数据
totalPages = Math.ceil(allData.length / perPageItem);
initPagination(); // 初始化分页
},
error: function (err) {
console.log(err);
}
});
3.2 分页初始化函数
初始化函数是入口，主要完成“更新分页链接”和“加载当前页数据”两个核心操作。
// 初始化分页
function initPagination() {
updatePaginationLinks();
loadPageData(currentPage);
}
3.3 数据加载函数
根据当前页码和每页显示数量，从所有数据中截取对应片段并渲染到页面。
// 加载指定页的数据
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('' + item + '');
});
}
3.4 分页链接更新函数
这是分页器视觉展示的核心，动态生成首页、上一页、页码、下一页、尾页及跳转组件，根据当前页码调整样式（如激活态、禁用态）。
// 更新分页链接
function updatePaginationLinks() {
var $pagination = $("#pagination");
$pagination.empty();
// 回到首页按钮
$pagination.append('«');
// 上一页按钮
var prevDisabled = currentPage === 1 ? 'disabled' : '';
$pagination.append('上一页');
// 中间页码按钮
var startPage = Math.max(1, currentPage - 2);
var endPage = Math.min(totalPages, currentPage + 2);
// 显示省略号
if (startPage > 1) {
$pagination.append('1');
if (startPage > 2) {
$pagination.append('...');
}
}
// 显示页码
for (var i = startPage; i <= endPage; i++) {
var activeClass = i === currentPage ? 'active' : '';
$pagination.append('' + i + '');
}
// 添加页码
if (endPage < totalPages) {
if (endPage < totalPages - 1) {
$pagination.append('...');
}
$pagination.append('' + totalPages + '');
}
// 下一页按钮
var nextDisabled = currentPage === totalPages ? 'disabled' : '';
$pagination.append('下一页');
// 跳转到尾页按钮
$pagination.append('»');
// 总共页数
$pagination.append('共 ' + totalPages + ' 页');
// 跳转按钮
// 跳转插件 - 根据配置决定是否显示
if (typeof showJump !== 'undefined' && showJump === true) {
createJumpPlugin($pagination);
}
}
// 跳转插件
function createJumpPlugin($container) {
$container.append('跳至'
+ ''
+ '页'
+ '');
}
3.5 事件处理
// 分页点击事件
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();
}
});
// 跳转到指定页
$(document).on('click', '.page-jump-btn', function (e) {
e.preventDefault();
var $input = $('.page-jump-input');
var page = parseInt($input.val());
// 验证输入值
if (isNaN(page) || page < 1 || page > totalPages) {
alert('请输入有效的页码 (1-' + totalPages + ')');
return;
}
currentPage = page;
loadPageData(currentPage);
updatePaginationLinks();
});
// 支持回车键跳转
$(document).on('keypress', '.page-jump-input', function (e) {
if (e.which === 13) { // 回车键
$('.page-jump-btn').click();
}
});
}
bindPageClickEvent()
到此这篇关于使用jQuery实现网页分页功能的完整方案的文章就介绍到这了,更多相关jQuery网页分页功能内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！
您可能感兴趣的文章:
jQuery实现Table分页效果
jquery+Ajax实现简单分页条效果
jQuery实现的分页插件完整示例
jQuery从零开始做一个分页组件功能示例
layui+jquery支持IE8的表格分页方法