原生js实现分页
在原生 JavaScript 中实现分页，主要涉及到以下几个基础概念：
基础概念：
- 数据集合：要分页展示的数据数组。
- 每页显示数量：指定每个页面上显示的数据条数。
- 当前页码：表示用户当前查看的页面编号。
优势：
- 提升用户体验，避免一次性加载大量数据导致页面卡顿。
- 更好地控制数据的展示和管理。
类型： 常见的有基于数组索引的分页和基于数据库查询的分页（在后端实现），这里说的是前端基于数组索引的分页。
应用场景： 适用于数据量不是特别巨大，且在前端进行处理和展示的情况，比如一个简单的列表展示。
以下是一个原生 JavaScript 实现分页的示例代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.page-item {
display: inline-block;
padding: 5px 10px;
border: 1px solid #ccc;
margin-right: 5px;
cursor: pointer;
}
.page-item.active {
background-color: #007bff;
color: white;
}
</style>
</head>
<body>
<ul id="dataList"></ul>
<div id="pagination"></div>
<script>
const data = []; // 假设这是要分页的数据数组
for (let i = 1; i <= 100; i++) {
data.push(`Item ${i}`);
}
const itemsPerPage = 10;
let currentPage = 1;
function renderPage(page) {
const start = (page - 1) * itemsPerPage;
const end = start + itemsPerPage;
const pageData = data.slice(start, end);
const dataList = document.getElementById('dataList');
dataList.innerHTML = '';
pageData.forEach(item => {
const li = document.createElement('li');
li.textContent = item;
dataList.appendChild(li);
});
}
function renderPagination() {
const totalPages = Math.ceil(data.length / itemsPerPage);
const pagination = document.getElementById('pagination');
pagination.innerHTML = '';
for (let i = 1; i <= totalPages; i++) {
const pageItem = document.createElement('span');
pageItem.classList.add('page-item');
pageItem.textContent = i;
if (i === currentPage) {
pageItem.classList.add('active');
}
pageItem.addEventListener('click', () => {
currentPage = i;
renderPage(currentPage);
renderPagination();
});
pagination.appendChild(pageItem);
}
}
renderPage(currentPage);
renderPagination();
</script>
</body>
</html>在上述代码中：
- 首先创建了一个包含 100 个数据项的数组。
renderPage函数用于根据当前页码渲染对应的数据到页面上。renderPagination函数用于生成并渲染分页按钮。
如果遇到分页数据显示不正确或者分页按钮不更新的问题，可能是以下原因：
- 计算起始和结束索引的逻辑有误，导致切片的数据范围不对。
- 更新当前页码后，没有重新调用渲染函数来更新页面显示。
解决方法就是仔细检查相关的计算逻辑和函数调用，确保在页码变化时正确地重新渲染数据和分页按钮。
相关·内容
6分57秒
08.在原生的RecyclerView上实现.avi
3840
30分53秒
尚硅谷-23-LIMIT实现分页操作
480
22分53秒
12-项目第五阶段-分页/03-尚硅谷-书城项目-分页初步实现
310
21分2秒
12-项目第五阶段-分页/09-尚硅谷-书城项目-前台分页的初步实现
290
10分45秒
04-jQuery/10-尚硅谷-jQuery-原生js和jQuery页面加载完成之后的区别
380
14分4秒
12-项目第五阶段-分页/12-尚硅谷-书城项目-价格区间搜索并分页功能的实现
350
14分25秒
javaweb项目实战 12-用户搜索加分页实现 学习猿地
1.3K34
13分14秒
27 - 尚硅谷-RBAC权限实战-用户维护 - 分页查询代码实现.avi
3730
24分23秒
javaweb项目实战 11-编写分页实现全过程 学习猿地
1.2K34
13分32秒
32、尚硅谷_机构模块_机构列表页的分页功能实现.wmv
3650
1分7秒
基于koa实现的微信JS-SDK调用Demo
260
51分57秒
14. 尚硅谷_Zepto_实战练习JS交互功能实现.avi
3780
扫码
添加站长 进交流群
领取专属 10元无门槛券
手把手带您无忧上云
相关资讯
热门标签
云服务器
ICP备案
对象存储
腾讯会议
云直播活动推荐
腾讯云开发者
