在现代Web开发中，分页是一个常见的需求，使用JavaScript和HTML可以实现简单的分页功能，下面是一个基本的CJS（CommonJS）分页代码示例，包括HTML、CSS和JavaScript部分。
HTML部分
我们需要一个基本的HTML结构来展示分页内容：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Pagination Example</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<div id="content"></div>
<div id="pagination"></div>
<script src="pagination.js"></script>
</body>
</html>CSS部分
我们添加一些基本的CSS样式来美化分页组件：
/* styles.css */
body {
font-family: Arial, sans-serif;
}
#content {
margin: 20px;
}
#pagination {
display: flex;
justify-content: center;
margin: 20px;
}
.page-item {
margin: 0 5px;
padding: 5px 10px;
border: 1px solid #ccc;
cursor: pointer;
}
.page-item.active {
background-color: #007bff;
color: white;
}JavaScript部分
我们编写JavaScript代码来实现分页逻辑，这里我们假设数据是一个简单的数组，每页显示3条数据。
// pagination.js
const data = [
'Item 1', 'Item 2', 'Item 3', 'Item 4', 'Item 5',
'Item 6', 'Item 7', 'Item 8', 'Item 9', 'Item 10'
];
const itemsPerPage = 3;
let currentPage = 1;
function renderContent() {
const contentDiv = document.getElementById('content');
contentDiv.innerHTML = '';
const startIndex = (currentPage 1) * itemsPerPage;
const endIndex = startIndex + itemsPerPage;
const pageData = data.slice(startIndex, endIndex);
pageData.forEach(item => {
const itemElement = document.createElement('div');
itemElement.textContent = item;
contentDiv.appendChild(itemElement);
});
}
function renderPagination() {
const paginationDiv = document.getElementById('pagination');
paginationDiv.innerHTML = '';
const totalPages = Math.ceil(data.length / itemsPerPage);
for (let i = 1; i <= totalPages; i++) {
const pageItem = document.createElement('div');
pageItem.textContent = i;
pageItem.classList.add('page-item');
if (i === currentPage) {
pageItem.classList.add('active');
}
pageItem.addEventListener('click', () => {
currentPage = i;
renderContent();
renderPagination();
});
paginationDiv.appendChild(pageItem);
}
}
document.addEventListener('DOMContentLoaded', () => {
renderContent();
renderPagination();
});解释与逻辑
1、数据准备：我们有一个包含10个元素的数组data，每个元素代表一个项目。itemsPerPage定义了每页显示的项目数量。
2、：renderContent函数根据当前页码计算要显示的数据范围，并将这些数据渲染到页面上。
3、渲染分页按钮：renderPagination函数根据总页数生成分页按钮，并为每个按钮添加点击事件监听器，当用户点击某个分页按钮时，更新当前页码并重新渲染内容和分页按钮。
4、初始化：在DOMContentLoaded事件触发时，调用renderContent和renderPagination函数以初始化页面内容和分页按钮。
FAQs
Q1: 如何动态加载数据而不是使用静态数组？
A1: 可以使用AJAX或Fetch API从服务器端获取数据，可以在renderContent函数中使用Fetch API来请求数据，并在成功响应后更新页面内容，以下是一个简单的示例：
async function fetchData() {
const response = await fetch('https://api.example.com/data'); // 替换为实际的API地址
const result = await response.json();
return result;
}
async function renderContent() {
const contentDiv = document.getElementById('content');
contentDiv.innerHTML = '';
const data = await fetchData(); // 获取数据
const startIndex = (currentPage 1) * itemsPerPage;
const endIndex = startIndex + itemsPerPage;
const pageData = data.slice(startIndex, endIndex);
pageData.forEach(item => {
const itemElement = document.createElement('div');
itemElement.textContent = item;
contentDiv.appendChild(itemElement);
});
}Q2: 如何实现无限滚动分页？
A2: 无限滚动分页是一种用户体验更好的分页方式，当用户滚动到页面底部时自动加载更多数据，可以通过监听scroll事件来实现，以下是一个简单示例：
window.addEventListener('scroll', () => {
if (window.innerHeight + window.scrollY >= document.body.offsetHeight) {
currentPage++;
renderContent();
renderPagination();
}
});通过这种方式，当用户滚动到页面底部时，会自动加载下一页的数据并更新页面内容和分页按钮。
以上内容就是解答有关“cjs分页代码”的详细内容了，我相信这篇文章可以为您解决一些疑惑，有任何问题欢迎留言反馈，谢谢阅读。
