在Web开发中，当页面需要展示大量数据时，一次性加载所有数据会导致页面加载缓慢、内存占用过高，分页加载数据就是解决这类问题的常用方案。分页加载的核心是将数据按固定条数拆分，每次只加载当前页需要的数据，配合分页控件让用户切换查看不同页的内容。
核心参数说明
无论采用哪种分页模式，都需要先明确几个核心参数：
- currentPage：当前页码，默认从1开始
- pageSize：每页展示的数据条数，比如10条、20条
- total：总数据条数，用于计算总页数
- totalPage：总页数，计算公式为Math.ceil(total / pageSize)
前端分页实现
前端分页的前提是已经获取到了全部数据，只需要在前端对数据进行截取展示，适合数据量较小的场景，比如本地静态数据或者接口返回全量数据的情况。
实现步骤
- 请求接口获取全部数据，保存到全量数据数组中
- 根据currentPage和pageSize计算当前页数据的起始和结束索引
- 从全量数据中截取对应范围的数据进行渲染
- 渲染分页控件，点击页码时更新currentPage并重新截取数据渲染
代码示例
// 模拟全量数据
const allData = Array.from({ length: 45 }, (_, i) => ({ id: i + 1, name: `数据${i + 1}` }));
// 分页参数
let currentPage = 1;
const pageSize = 10;
const total = allData.length;
const totalPage = Math.ceil(total / pageSize);
// 获取当前页数据
function getCurrentPageData() {
const start = (currentPage - 1) * pageSize;
const end = start + pageSize;
return allData.slice(start, end);
}
// 渲染数据列表
function renderList() {
const data = getCurrentPageData();
const listContainer = document.getElementById('list');
listContainer.innerHTML = data.map(item => `<p>${item.id} - ${item.name}</p>`).join('');
}
// 渲染分页控件
function renderPagination() {
const paginationContainer = document.getElementById('pagination');
let paginationHtml = '';
for (let i = 1; i <= totalPage; i++) {
paginationHtml += `<button class="${i === currentPage ? 'active' : ''}" onclick="changePage(${i})">${i}</button>`;
}
paginationContainer.innerHTML = paginationHtml;
}
// 切换页码
function changePage(page) {
currentPage = page;
renderList();
renderPagination();
}
// 初始化
renderList();
renderPagination();后端分页实现
后端分页适用于数据量大的场景，每次只请求当前页的数据，减少网络传输和前端内存占用，是实际项目中最常用的分页方式。需要前端将currentPage和pageSize作为参数传递给后端，后端返回当前页数据和总条数。
实现步骤
- 初始化分页参数，默认请求第一页数据
- 请求接口时携带currentPage和pageSize参数
- 接口返回当前页数据和total总条数，计算总页数
- 渲染当前页数据和分页控件，点击页码时重新请求对应页数据
代码示例
// 分页参数
let currentPage = 1;
const pageSize = 10;
let total = 0;
let totalPage = 0;
// 请求后端接口获取分页数据
function fetchPageData(page) {
// 模拟接口请求，实际项目中替换为真实的fetch或axios请求
return new Promise(resolve => {
// 模拟后端返回数据，实际接口会返回当前页数据和total
setTimeout(() => {
const mockData = {
list: Array.from({ length: pageSize }, (_, i) => ({
id: (page - 1) * pageSize + i + 1,
name: `后端数据${(page - 1) * pageSize + i + 1}`
})),
total: 87 // 模拟总数据条数
};
resolve(mockData);
}, 300);
});
}
// 加载并渲染数据
async function loadPageData(page) {
currentPage = page;
const res = await fetchPageData(page);
total = res.total;
totalPage = Math.ceil(total / pageSize);
// 渲染数据列表
const listContainer = document.getElementById('list');
listContainer.innerHTML = res.list.map(item => `<p>${item.id} - ${item.name}</p>`).join('');
// 渲染分页控件
renderPagination();
}
// 渲染分页控件
function renderPagination() {
const paginationContainer = document.getElementById('pagination');
let paginationHtml = '';
// 上一页按钮
if (currentPage > 1) {
paginationHtml += `<button onclick="loadPageData(${currentPage - 1})">上一页</button>`;
}
// 页码按钮，这里简化为展示所有页码，实际项目可优化为展示部分页码
for (let i = 1; i <= totalPage; i++) {
paginationHtml += `<button class="${i === currentPage ? 'active' : ''}" onclick="loadPageData(${i})">${i}</button>`;
}
// 下一页按钮
if (currentPage < totalPage) {
paginationHtml += `<button onclick="loadPageData(${currentPage + 1})">下一页</button>`;
}
paginationContainer.innerHTML = paginationHtml;
}
// 初始化加载第一页数据
loadPageData(1);注意事项
- 分页控件的样式可以根据项目需求自定义，比如添加禁用状态、省略号等优化体验
- 后端分页时要注意接口参数的命名规范，和后端约定好currentPage、pageSize、pageNum等参数的名称
- 如果数据会动态更新，需要在数据变化后重新计算总页数和当前页码，避免页码异常
- 可以在请求数据时添加加载状态提示，提升用户体验
JavaScript分页加载数据请求前端分页后端分页修改时间：2026-06-05 02:06:22