jQuery 分页器示例

原创已于 2025-06-27 13:30:38 修改 · 739 阅读

·

24

·

CC 4.0 BY-SA版权

版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。

文章标签：

#分页 #jquery

于 2025-06-05 17:21:18 首次发布

<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>jQuery 分页器示例</title>
<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: 8px 16px;
margin: 0 4px;
border: 1px solid #ddd;
text-decoration: none;
color: #333;
border-radius: 4px;
}
.pagination a.active {
background-color: #4CAF50;
color: white;
border: 1px solid #4CAF50;
}
.pagination a:hover:not(.active) {
background-color: #ddd;
}
.pagination a.disabled {
color: #aaa;
pointer-events: none;
cursor: default;
}
</style>
</head>
<body>
<div class="container">
<h1>jQuery 分页器示例</h1>
<p>这是一个简单的分页器实现，使用jQuery动态加载和显示数据。</p>



<div id="data-container">

</div>

<div class="pagination" id="pagination">

</div>
</div>

<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script>
$(document).ready(function() {
// 模拟数据 - 实际应用中可以从服务器获取
var allData = [];
for (var i = 1; i <= 100; i++) {
allData.push("数据项 #" + i);
}

// 分页设置
var currentPage = 1;
var itemsPerPage = 10;
var totalPages = Math.ceil(allData.length / itemsPerPage);

// 初始化分页
function initPagination() {
updatePaginationLinks();
loadPageData(currentPage);
}

// 加载指定页的数据
function loadPageData(page) {
var startIndex = (page - 1) * itemsPerPage;
var endIndex = startIndex + itemsPerPage;
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>');
});
}

// 更新分页链接
function updatePaginationLinks() {
var $pagination = $("#pagination");
$pagination.empty();

// 上一页按钮
var prevDisabled = currentPage === 1 ? 'disabled' : '';
$pagination.append('<a href="#" class="page-prev ' + prevDisabled + '">« 上一页</a>');

// 页码按钮
var startPage = Math.max(1, currentPage - 2);
var endPage = Math.min(totalPages, currentPage + 2);

if (startPage > 1) {
$pagination.append('<a href="#" 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="#" class="page-link ' + activeClass + '" data-page="' + i + '">' + i + '</a>');
}

if (endPage < totalPages) {
if (endPage < totalPages - 1) {
$pagination.append('<span>...</span>');
}
$pagination.append('<a href="#" class="page-link" data-page="' + totalPages + '">' + totalPages + '</a>');
}

// 下一页按钮
var nextDisabled = currentPage === totalPages ? 'disabled' : '';
$pagination.append('<a href="#" class="page-next ' + nextDisabled + '">下一页 »</a>');
}

// 分页点击事件
$(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();
}
});

// 初始化
initPagination();
});
</script>
</body>
</html>

评论

被折叠的条评论为什么被折叠?

到【灌水乐园】发言

查看更多评论

添加红包

成就一亿技术人!

hope_wisdom

发出的红包

实付元

使用余额支付

点击重新获取

扫码支付

钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。