jquery实现前端分页
jQuery实现前端分页的方法
基本分页逻辑
利用jQuery动态渲染分页数据和分页按钮。假设有一个数据数组dataList，每页显示pageSize条数据。
// 示例数据
const dataList = [...]; // 你的数据数组
const pageSize = 5; // 每页显示数量
let currentPage = 1; // 当前页码
// 渲染分页数据
function renderPage(page) {
const start = (page - 1) * pageSize;
const end = start + pageSize;
const pageData = dataList.slice(start, end);
$('#data-container').empty();
pageData.forEach(item => {
$('#data-container').append(`<div>${item.name}</div>`);
});
}
// 渲染分页按钮
function renderPagination() {
const totalPages = Math.ceil(dataList.length / pageSize);
$('#pagination').empty();
for (let i = 1; i <= totalPages; i++) {
$('#pagination').append(
`<button class="page-btn ${i === currentPage ? 'active' : ''}">${i}</button>`
);
}
$('.page-btn').click(function() {
currentPage = parseInt($(this).text());
renderPage(currentPage);
renderPagination();
});
}
// 初始化
renderPage(1);
renderPagination();动态数据加载
若数据通过AJAX获取，需在回调中处理分页：
$.get('/api/data', function(response) {
dataList = response.data;
renderPage(1);
renderPagination();
});分页样式优化
通过CSS增强分页按钮交互性：
.page-btn {
padding: 5px 10px;
margin: 0 5px;
cursor: pointer;
border: 1px solid #ddd;
background: #fff;
}
.page-btn.active {
background: #007bff;
color: white;
border-color: #007bff;
}完整HTML结构
整合分页组件与数据容器：
<div id="data-container"></div>
<div id="pagination"></div>高级功能扩展
- 上一页/下一页按钮：在
renderPagination中添加导航按钮 - 数据筛选：在分页前对
dataList进行过滤 - 异步加载提示：添加加载动画提升用户体验
通过以上方法可实现基础的前端分页功能，适用于数据量适中的场景。若数据量极大（如超过1000条），建议改用后端分页。
