JS分页代码实例|极客笔记

JS分页代码实例

分页是Web开发中常用的功能之一，它可以帮助用户浏览大量数据并有序地展示在页面上。在本文中，我们将详细讨论如何使用JavaScript实现简单的分页功能。我们将使用HTML、CSS和JavaScript来创建一个基本的分页示例，并且会逐步向你展示每个步骤的实现过程。

步骤1：HTML结构

首先，我们需要在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="dataContainer">
        <!-- Data will be displayed here -->
    </div>

    <div id="paginationContainer">
        <!-- Pagination controls will be displayed here -->
    </div>

    <script src="script.js"></script>
</body>
</html>

在上面的结构中，我们只定义了一个用于展示数据的dataContainer和一个用于展示分页控件的paginationContainer。

步骤2：CSS样式

接下来，我们需要定义一些基本的CSS样式来美化我们的分页控件。以下是一个简单的CSS样式：

body {
    font-family: Arial, sans-serif;
}

#dataContainer {
    padding: 20px;
}

#paginationContainer {
    margin-top: 20px;
}

.pageNumber {
    display: inline-block;
    padding: 5px 10px;
    margin: 0 5px;
    background-color: lightblue;
    color: black;
    cursor: pointer;
}

.active {
    background-color: blue;
    color: white;
}

在上面的样式中，我们定义了一些基本的样式，包括页面整体的字体和数据容器的填充，以及分页控件的外边距。同时，我们定义了页码元素的样式，包括背景颜色、文字颜色和鼠标指示样式。

步骤3：JavaScript功能

最后，我们来实现JavaScript功能。我们将定义一个简单的JavaScript类来处理分页逻辑。以下是完整的JavaScript代码：

class Pagination {
    constructor(data, itemsPerPage) {
        this.data = data;
        this.itemsPerPage = itemsPerPage;
        this.currentPage = 1;
        this.totalPages = Math.ceil(this.data.length / this.itemsPerPage);
        this.paginationContainer = document.getElementById('paginationContainer');
        this.dataContainer = document.getElementById('dataContainer');
    }

    init() {
        this.renderPageNumbers();
        this.renderData();
    }

    renderPageNumbers() {
        for (let i = 1; i <= this.totalPages; i++) {
            const pageNumber = document.createElement('span');
            pageNumber.innerText = i;
            pageNumber.classList.add('pageNumber');
            if (i === this.currentPage) {
                pageNumber.classList.add('active');
            }
            pageNumber.addEventListener('click', () => {
                this.currentPage = i;
                this.renderData();
                this.updateActivePage();
            });
            this.paginationContainer.appendChild(pageNumber);
        }
    }

    renderData() {
        this.dataContainer.innerHTML = '';
        const startIndex = (this.currentPage - 1) * this.itemsPerPage;
        const endIndex = startIndex + this.itemsPerPage;
        const dataToShow = this.data.slice(startIndex, endIndex);
        dataToShow.forEach(item => {
            const dataItem = document.createElement('div');
            dataItem.innerText = item;
            this.dataContainer.appendChild(dataItem);
        });
    }

    updateActivePage() {
        const pageNumbers = document.getElementsByClassName('pageNumber');
        for (let i = 0; i < pageNumbers.length; i++) {
            if (i + 1 === this.currentPage) {
                pageNumbers[i].classList.add('active');
            } else {
                pageNumbers[i].classList.remove('active');
            }
        }
    }
}

// Sample data
const data = Array.from({ length: 50 }, (_, i) => `Item ${i + 1}`);
const itemsPerPage = 10;

const pagination = new Pagination(data, itemsPerPage);
pagination.init();

在上面的代码中，我们定义了一个Pagination类，它接受数据和每页显示的条目数作为参数，并且实现了初始化、渲染页码和渲染数据等功能。我们还提供了一个简单的示例数据数组，并且创建了一个Pagination实例并调用了init方法。