如何实现Bootstrap表格的导航分页功能？

API 探路者
2026-8-19
Bootstrap表格分页实现（每页10行）
直接用原生JavaScript就能实现你要的分页功能，不用额外引入插件，下面是完整的可运行代码：
<div class="card card-body border-0 shadow table-wrapper table-responsive">
    <table class="table table-hover">
        <thead>
            <tr>
                <th class="border-gray-200">Item</th>
                <th class="border-gray-200">Date</th>                       
                <th class="border-gray-200">Date Time</th>
                <th class="border-gray-200">Data</th>
                <th class="border-gray-200">Status</th>
            </tr>
        </thead>
        <tbody id="table-body">
            <!-- 可添加任意数量数据行，示例已包含11行测试分页 -->
            <tr>
                <td><a href="#" class="fw-bold">Data 1</a></td>
                <td><span class="fw-normal">2024-01-01</span></td>
                <td><span class="fw-normal">2024-01-01 10:00</span></td>  
                <td><span class="fw-normal">Sample Data 1</span></td>                        
                <td><span class="fw-bold text-warning">Due</span></td>
            </tr>
            <tr>
                <td><a href="#" class="fw-bold">Data 2</a></td>
                <td><span class="fw-normal">2024-01-02</span></td>
                <td><span class="fw-normal">2024-01-02 11:00</span></td>  
                <td><span class="fw-normal">Sample Data 2</span></td>                        
                <td><span class="fw-bold text-success">Completed</span></td>
            </tr>
            <tr>
                <td><a href="#" class="fw-bold">Data 3</a></td>
                <td><span class="fw-normal">2024-01-03</span></td>
                <td><span class="fw-normal">2024-01-03 12:00</span></td>  
                <td><span class="fw-normal">Sample Data 3</span></td>                        
                <td><span class="fw-bold text-danger">Overdue</span></td>
            </tr>
            <tr>
                <td><a href="#" class="fw-bold">Data 4</a></td>
                <td><span class="fw-normal">2024-01-04</span></td>
                <td><span class="fw-normal">2024-01-04 13:00</span></td>  
                <td><span class="fw-normal">Sample Data 4</span></td>                        
                <td><span class="fw-bold text-warning">Due</span></td>
            </tr>
            <tr>
                <td><a href="#" class="fw-bold">Data 5</a></td>
                <td><span class="fw-normal">2024-01-05</span></td>
                <td><span class="fw-normal">2024-01-05 14:00</span></td>  
                <td><span class="fw-normal">Sample Data 5</span></td>                        
                <td><span class="fw-bold text-success">Completed</span></td>
            </tr>
            <tr>
                <td><a href="#" class="fw-bold">Data 6</a></td>
                <td><span class="fw-normal">2024-01-06</span></td>
                <td><span class="fw-normal">2024-01-06 15:00</span></td>  
                <td><span class="fw-normal">Sample Data 6</span></td>                        
                <td><span class="fw-bold text-danger">Overdue</span></td>
            </tr>
            <tr>
                <td><a href="#" class="fw-bold">Data 7</a></td>
                <td><span class="fw-normal">2024-01-07</span></td>
                <td><span class="fw-normal">2024-01-07 16:00</span></td>  
                <td><span class="fw-normal">Sample Data 7</span></td>                        
                <td><span class="fw-bold text-warning">Due</span></td>
            </tr>
            <tr>
                <td><a href="#" class="fw-bold">Data 8</a></td>
                <td><span class="fw-normal">2024-01-08</span></td>
                <td><span class="fw-normal">2024-01-08 17:00</span></td>  
                <td><span class="fw-normal">Sample Data 8</span></td>                        
                <td><span class="fw-bold text-success">Completed</span></td>
            </tr>
            <tr>
                <td><a href="#" class="fw-bold">Data 9</a></td>
                <td><span class="fw-normal">2024-01-09</span></td>
                <td><span class="fw-normal">2024-01-09 18:00</span></td>  
                <td><span class="fw-normal">Sample Data 9</span></td>                        
                <td><span class="fw-bold text-danger">Overdue</span></td>
            </tr>
            <tr>
                <td><a href="#" class="fw-bold">Data 10</a></td>
                <td><span class="fw-normal">2024-01-10</span></td>
                <td><span class="fw-normal">2024-01-10 19:00</span></td>  
                <td><span class="fw-normal">Sample Data 10</span></td>                        
                <td><span class="fw-bold text-warning">Due</span></td>
            </tr>
            <tr>
                <td><a href="#" class="fw-bold">Data 11</a></td>
                <td><span class="fw-normal">2024-01-11</span></td>
                <td><span class="fw-normal">2024-01-11 20:00</span></td>  
                <td><span class="fw-normal">Sample Data 11</span></td>                        
                <td><span class="fw-bold text-success">Completed</span></td>
            </tr>
        </tbody>
    </table>
    <div class="card-footer px-3 border-0 d-flex flex-column flex-lg-row align-items-center justify-content-between">
        <nav aria-label="Page navigation example">
            <ul id="pagination-list" class="pagination mb-0">
                <!-- 分页按钮由JS动态生成 -->
            </ul>
        </nav>
        <div id="page-info" class="fw-normal small mt-4 mt-lg-0">Showing <b>0</b> out of <b>0</b> entries</div>
    </div>
</div>

<script>
// 每页显示10行
const rowsPerPage = 10;
// 获取核心元素
const tableRows = document.querySelectorAll('#table-body tr');
const paginationList = document.getElementById('pagination-list');
const pageInfo = document.getElementById('page-info');
const totalRows = tableRows.length;
const totalPages = Math.ceil(totalRows / rowsPerPage);
let currentPage = 1;

// 动态生成分页按钮
function renderPagination() {
    paginationList.innerHTML = '';

    // 上一页按钮
    const prevItem = document.createElement('li');
    prevItem.className = 'page-item' + (currentPage === 1 ? ' disabled' : '');
    prevItem.innerHTML = `<a class="page-link" href="#">Previous</a>`;
    prevItem.addEventListener('click', () => {
        if (currentPage > 1) {
            currentPage--;
            displayPage();
        }
    });
    paginationList.appendChild(prevItem);

    // 页码按钮
    for (let i = 1; i <= totalPages; i++) {
        const pageItem = document.createElement('li');
        pageItem.className = 'page-item' + (i === currentPage ? ' active' : '');
        pageItem.innerHTML = `<a class="page-link" href="#">${i}</a>`;
        pageItem.addEventListener('click', () => {
            currentPage = i;
            displayPage();
        });
        paginationList.appendChild(pageItem);
    }

    // 下一页按钮
    const nextItem = document.createElement('li');
    nextItem.className = 'page-item' + (currentPage === totalPages ? ' disabled' : '');
    nextItem.innerHTML = `<a class="page-link" href="#">Next</a>`;
    nextItem.addEventListener('click', () => {
        if (currentPage < totalPages) {
            currentPage++;
            displayPage();
        }
    });
    paginationList.appendChild(nextItem);
}

// 切换页面显示内容
function displayPage() {
    // 计算当前页的行范围
    const startIndex = (currentPage - 1) * rowsPerPage;
    const endIndex = Math.min(startIndex + rowsPerPage, totalRows);

    // 控制行的显示/隐藏
    tableRows.forEach((row, index) => {
        row.style.display = index >= startIndex && index < endIndex ? '' : 'none';
    });

    // 更新底部统计信息
    const displayedRows = endIndex - startIndex;
    pageInfo.innerHTML = `Showing <b>${displayedRows}</b> out of <b>${totalRows}</b> entries`;

    // 更新分页按钮状态
    renderPagination();
}

// 页面加载完成后初始化
document.addEventListener('DOMContentLoaded', () => {
    if (totalRows > 0) {
        displayPage();
    }
});
</script>
核心功能说明

自动分页：根据表格总行数自动计算总页数，动态生成对应页码按钮
页面切换：点击上一页、下一页或指定页码，会自动切换显示对应10行数据
状态反馈：当前页码会高亮显示，第一页时上一页按钮禁用，最后一页时下一页按钮禁用，底部实时显示当前页的行数统计
无需额外插件：所有逻辑用原生JavaScript实现，依赖你已有的Bootstrap样式即可运行
内容的提问来源于stack exchange，提问作者mikegrep
如何实现Bootstrap表格的导航分页功能？

核心功能说明 #

核心功能说明
