原生js怎么写分页列表

原生JS实现分页列表的方法有很多，其中核心思想主要包括以下几个方面：数据分割、页码计算、事件监听、DOM操作。 下面将详细描述如何实现这一功能。首先，我们将数据进行分割，使其适应分页显示，其次我们需要根据数据量和分页设置计算出需要的页码，接着通过事件监听用户的操作来更新页面显示，最后通过DOM操作将数据展示在页面上。

一、数据分割

数据分割是分页的第一步。我们需要将大数据集分割成多个小数据集，每个小数据集表示一页的内容。

function paginate(data, pageSize) {
    const totalPages = Math.ceil(data.length / pageSize);
    const pages = [];
    for (let i = 0; i < totalPages; i++) {
        pages.push(data.slice(i * pageSize, (i + 1) * pageSize));
    }
    return pages;
}

在这个函数中，data 是我们需要分页的数据集，pageSize 表示每页显示多少条数据。totalPages 计算出需要的总页数，pages 是一个数组，存储每一页的数据。

二、页码计算

页码计算是为了在前端展示页码并让用户可以点击页码进行跳转。我们可以根据总页数生成一个页码列表。

function createPageNumbers(totalPages) {
    const pageNumbers = [];
    for (let i = 1; i <= totalPages; i++) {
        pageNumbers.push(i);
    }
    return pageNumbers;
}

三、事件监听

我们需要监听用户的点击事件，以便在用户点击页码时更新显示内容。

function addPageClickListeners(pageNumbers, pages) {
    pageNumbers.forEach((pageNumber, index) => {
        const pageElement = document.getElementById(`page-${pageNumber}`);
        pageElement.addEventListener('click', () => {
            displayPage(pages[index]);
        });
    });
}

四、DOM操作

通过DOM操作将数据展示在页面上，并且可以根据用户的操作更新显示内容。

function displayPage(data) {
    const listElement = document.getElementById('list');
    listElement.innerHTML = '';
    data.forEach(item => {
        const listItem = document.createElement('li');
        listItem.textContent = item;
        listElement.appendChild(listItem);
    });
}

五、完整示例

下面是一个完整的示例，展示了如何使用上述方法实现一个分页列表。

<!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>
</head>
<body>
    <ul id="list"></ul>
    <div id="pagination"></div>
    <script>
        const data = Array.from({ length: 100 }, (_, i) => `Item ${i + 1}`);
        const pageSize = 10;
        const pages = paginate(data, pageSize);
        const totalPages = pages.length;
        const pageNumbers = createPageNumbers(totalPages);
        pageNumbers.forEach(pageNumber => {
            const pageElement = document.createElement('button');
            pageElement.id = `page-${pageNumber}`;
            pageElement.textContent = pageNumber;
            document.getElementById('pagination').appendChild(pageElement);
        });
        addPageClickListeners(pageNumbers, pages);
        // Initially display the first page
        displayPage(pages[0]);
        function paginate(data, pageSize) {
            const totalPages = Math.ceil(data.length / pageSize);
            const pages = [];
            for (let i = 0; i < totalPages; i++) {
                pages.push(data.slice(i * pageSize, (i + 1) * pageSize));
            }
            return pages;
        }
        function createPageNumbers(totalPages) {
            const pageNumbers = [];
            for (let i = 1; i <= totalPages; i++) {
                pageNumbers.push(i);
            }
            return pageNumbers;
        }
        function addPageClickListeners(pageNumbers, pages) {
            pageNumbers.forEach((pageNumber, index) => {
                const pageElement = document.getElementById(`page-${pageNumber}`);
                pageElement.addEventListener('click', () => {
                    displayPage(pages[index]);
                });
            });
        }
        function displayPage(data) {
            const listElement = document.getElementById('list');
            listElement.innerHTML = '';
            data.forEach(item => {
                const listItem = document.createElement('li');
                listItem.textContent = item;
                listElement.appendChild(listItem);
            });
        }
    </script>
</body>
</html>

六、优化与扩展

1、动态数据加载

对于大型数据集，建议采用懒加载或虚拟滚动技术，这样可以减少初始加载时间和内存消耗。

2、UI美化

通过CSS样式和JavaScript动态效果，可以使分页列表更加美观和用户友好。例如，可以添加当前页码高亮显示、过渡动画等效果。

3、搜索与筛选

结合分页功能，可以增加数据的搜索和筛选功能。用户可以通过输入关键字或选择条件，快速找到所需数据。

4、API数据分页

在实际应用中，数据通常来自后端API。此时，可以通过向API发送分页参数（如页码、每页数量）来获取分页数据，并根据响应结果更新页面显示。

async function fetchData(page, pageSize) {
    const response = await fetch(`https://api.example.com/data?page=${page}&pageSize=${pageSize}`);
    const data = await response.json();
    return data;
}
async function initPagination() {
    const pageSize = 10;
    let currentPage = 1;
    async function updatePage(page) {
        const data = await fetchData(page, pageSize);
        displayPage(data.items);
        currentPage = page;
    }
    document.getElementById('next').addEventListener('click', () => {
        updatePage(currentPage + 1);
    });
    document.getElementById('prev').addEventListener('click', () => {
        updatePage(currentPage - 1);
    });
    // Initial load
    updatePage(1);
}
initPagination();

七、用户体验提升

1、页码跳转

允许用户输入页码并直接跳转到指定页，提高用户体验和操作效率。

<input type="number" id="pageInput" min="1">
<button id="jumpBtn">Jump</button>

document.getElementById('jumpBtn').addEventListener('click', () => {
    const page = parseInt(document.getElementById('pageInput').value);
    if (page > 0 && page <= totalPages) {
        updatePage(page);
    }
});

2、响应式设计

通过媒体查询和灵活布局，使分页列表在不同屏幕尺寸和设备上都能良好展示。

@media (max-width: 600px) {
    #list {
        font-size: 12px;
    }
}

八、总结

实现原生JS分页列表不仅仅是一个技术问题，更是对数据处理、用户交互、性能优化等多方面的综合考量。通过合理的数据分割、页码计算、事件监听和DOM操作，可以实现一个高效且用户友好的分页列表。同时，结合实际需求进行优化与扩展，如动态数据加载、API分页、搜索筛选等，可以大大提升用户体验和系统性能。

推荐使用 研发项目管理系统PingCode 和 通用项目协作软件Worktile 来管理和协作团队项目，确保项目进度和质量。