分页js插件

分页JavaScript插件是一种用于在网页上实现数据分页功能的工具。它允许用户通过点击页码或使用导航按钮来浏览大量数据的不同部分，从而提高用户体验和页面性能。

基础概念

分页的核心概念是将数据集分割成多个较小的部分（即“页”），每页显示固定数量的数据项。用户可以通过界面上的导航元素（如页码、上一页/下一页按钮）来切换不同的页。

类型

客户端分页：所有数据一次性加载到客户端，然后在浏览器中进行分页。
服务器端分页：每次用户切换页面时，只从服务器请求当前页的数据。
混合分页：结合客户端和服务器端分页的优点，部分数据预加载，其余按需请求。

应用场景

电子商务网站：产品列表分页。
新闻网站：文章列表分页。
论坛：帖子列表分页。
数据分析平台：大数据表格分页。

示例代码（使用jQuery和Bootstrap）

以下是一个简单的客户端分页示例，使用了jQuery和Bootstrap的分页组件：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>分页示例</title>
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css">
</head>
<body>
    <div class="container">
        <ul id="dataList" class="list-group"></ul>
        <nav aria-label="Page navigation">
            <ul id="pagination" class="pagination"></ul>
        </nav>
    </div>

    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script>
    <script>
        const data = Array.from({ length: 100 }, (_, i) => `Item ${i + 1}`);
        const itemsPerPage = 10;
        let currentPage = 1;

        function displayData(page) {
            const start = (page - 1) * itemsPerPage;
            const end = start + itemsPerPage;
            const pageData = data.slice(start, end);
            $('#dataList').empty();
            pageData.forEach(item => {
                $('#dataList').append(`<li class="list-group-item">${item}</li>`);
            });
        }

        function setupPagination() {
            const pageCount = Math.ceil(data.length / itemsPerPage);
            $('#pagination').empty();
            for (let i = 1; i <= pageCount; i++) {
                $('#pagination').append(`<li class="page-item ${i === currentPage ? 'active' : ''}"><a class="page-link" href="#" data-page="${i}">${i}</a></li>`);
            }
        }

        $(document).ready(function() {
            displayData(currentPage);
            setupPagination();

            $('#pagination').on('click', '.page-link', function(e) {
                e.preventDefault();
                currentPage = $(this).data('page');
                displayData(currentPage);
                setupPagination();
            });
        });
    </script>
</body>
</html>