knowledge/view/js/pagination.js

document.addEventListener('DOMContentLoaded', function() {
    const items = document.getElementById('items');
    const pagination = document.getElementById('pagination');
    const data = [/* 这里是你要分页的数据，例如一个包含多个对象的数组 */]; // 示例数据，实际应用中应从服务器获取或定义在外部文件等
    const itemsPerPage = 5; // 每页显示的项目数
    let currentPage = 1; // 当前页码
 
    function displayItems(page) {
        const startIndex = (page - 1) * itemsPerPage;
        const endIndex = startIndex + itemsPerPage;
        items.innerHTML = ''; // 清空当前显示的内容
        for (let i = startIndex; i < endIndex && i < data.length; i++) {
            const item = document.createElement('li');
            item.textContent = data[i]; // 显示数据项，根据实际情况调整显示内容（例如使用data[i].name等）
            items.appendChild(item);
        }
    }
 
    function displayPagination(totalPages) {
        pagination.innerHTML = ''; // 清空现有的分页链接
        for (let i = 1; i <= totalPages; i++) {
            const pageItem = document.createElement('li');
            pageItem.textContent = i;
            pageItem.onclick = function() {
                currentPage = i;
                displayItems(currentPage); // 显示当前页的数据项
                displayPagination(totalPages); // 更新分页链接的激活状态
            };
            if (i === currentPage) {
                pageItem.classList.add('active'); // 为当前页码添加激活样式
            }
            pagination.appendChild(pageItem);
        }
    }
 
    const totalPages = Math.ceil(data.length / itemsPerPage); // 计算总页数
    displayItems(currentPage); // 初始化显示第一页的数据项
    displayPagination(totalPages); // 初始化分页链接的显示
});