JS 分页插件|极客笔记

JS 分页插件

在web开发中，经常会遇到需要对一些数据进行分页展示的情况。为了方便用户浏览数据，我们可以使用JS分页插件来实现数据的分页展示。本文将详细介绍如何使用JS编写一个简单的分页插件，并展示其运行效果。

分页插件的目的

分页插件的主要目的是将一组数据分成多个页面进行展示，以便用户能够轻松浏览数据。通过分页插件，用户可以选择不同的页码来浏览不同的数据页，提高了用户体验。

实现分页插件

HTML结构

首先，我们需要一个包含数据的容器，并为分页控件准备一个区域，HTML结构如下：

<div id="data-container">
    <!-- 数据展示区域 -->
</div>

<div id="pagination-container">
    <!-- 分页控件区域 -->
</div>

CSS样式

为了美化我们的分页控件，我们可以添加一些CSS样式：

#pagination-container {
    text-align: center;
}

#pagination-container .page {
    display: inline-block;
    margin: 0 5px;
    cursor: pointer;
}

#pagination-container .page.active {
    font-weight: bold;
    color: #333;
}

#pagination-container .page:hover {
    text-decoration: underline;
}

JavaScript代码

现在，让我们来编写JS代码来实现分页插件。首先，我们定义一些常量：

const data = [...]; // 数据数组
const itemsPerPage = 10; // 每页显示的数据数量
const totalPages = Math.ceil(data.length / itemsPerPage); // 计算总页数
let currentPage = 1; // 当前页码

接下来，编写函数来渲染数据和分页控件：

function renderData() {
    const startIndex = (currentPage - 1) * itemsPerPage;
    const endIndex = startIndex + itemsPerPage;
    const pageData = data.slice(startIndex, endIndex);

    document.getElementById('data-container').innerHTML = '';
    pageData.forEach(item => {
        document.getElementById('data-container').innerHTML += `<div>${item}</div>`;
    });
}

function renderPagination() {
    document.getElementById('pagination-container').innerHTML = '';
    for (let i = 1; i <= totalPages; i++) {
        const page = document.createElement('span');
        page.classList.add('page');
        page.textContent = i;

        if (i === currentPage) {
            page.classList.add('active');
        }

        page.addEventListener('click', () => {
            currentPage = i;
            renderData();
            renderPagination();
        });

        document.getElementById('pagination-container').appendChild(page);
    }
}

renderData();
renderPagination();