表格分页怎么写

最新推荐文章于 2024-08-30 20:29:15 发布

shineミ小瑞

最新推荐文章于 2024-08-30 20:29:15 发布

阅读量102

点赞数 2

文章标签： javascript 前端 css

本文链接：https://blog.csdn.net/qq_46535795/article/details/141439358

版权

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>表格分页示例</title>
    <style>
        /* 基本样式 */
        table {
            width: 100%;
            border-collapse: collapse;
            margin-bottom: 20px;
        }
        th, td {
            padding: 8px 12px;
            border: 1px solid #ddd;
            text-align: left;
        }
        th {
            background-color: #f4f4f4;
        }

        /* 分页按钮样式 */
        .pagination {
            display: flex;
            justify-content: center;
            margin-top: 20px;
        }
        .pagination button {
            margin: 0 5px;
            padding: 5px 10px;
            border: 1px solid #ddd;
            background-color: #f4f4f4;
            cursor: pointer;
        }
        .pagination button.active {
            background-color: #007bff;
            color: white;
        }
        .pagination button.disabled {
            background-color: #e0e0e0;
            color: #a0a0a0;
            cursor: not-allowed;
        }
    </style>
</head>
<body>

<div>
    <table id="addTableDataList">
        <thead>
            <tr>
                <th>Table 1 Data (imfr_ud_tableid)</th>
                <th>Table 2 Data (imfr_ud_tableid)</th>
            </tr>
        </thead>
        <tbody id="tableBody">
        </tbody>
    </table>

    <div id="pagination" class="pagination">
    </div>
</div>

<script>
    // 模拟从数据库中提取的数据
    const table1Data = [
        {imfr_ud_tableid: '1121312edsadas', imfr_ud_name: 'Name1'},
        {imfr_ud_tableid: 'jjjj', imfr_ud_name: 'Name2'},
        {imfr_ud_tableid: 'gge', imfr_ud_name: 'Name3'},
        {imfr_ud_tableid: 'm10420ccc', imfr_ud_name: 'Name4'},
        {imfr_ud_tableid: 'ooooo', imfr_ud_name: 'Name5'},
        {imfr_ud_tableid: 'sssss', imfr_ud_name: 'Name6'},
        {imfr_ud_tableid: '20240822', imfr_ud_name: 'Name7'},
        {imfr_ud_tableid: '666666', imfr_ud_name: 'Name8'},
        {imfr_ud_tableid: '0000000000', imfr_ud_name: 'Name9'},
        {imfr_ud_tableid: '1111111111', imfr_ud_name: 'Name10'},
        {imfr_ud_tableid: 'ExtraData1', imfr_ud_name: 'Name11'}
    ];

    const table2Data = [
        {imfr_ud_tableid: 'otherData1'},
        {imfr_ud_tableid: 'otherData2'},
        {imfr_ud_tableid: 'otherData3'},
        {imfr_ud_tableid: 'otherData4'},
        {imfr_ud_tableid: 'otherData5'},
        {imfr_ud_tableid: 'otherData6'},
        {imfr_ud_tableid: 'otherData7'},
        {imfr_ud_tableid: 'otherData8'},
        {imfr_ud_tableid: 'otherData9'},
        {imfr_ud_tableid: 'otherData10'},
        {imfr_ud_tableid: 'otherData11'}
    ];

    let currentPage = 1;
    const rowsPerPage = 10;
    const totalPages = Math.ceil(table1Data.length / rowsPerPage);

    function displayTableData(page) {
        const tbody = document.getElementById('tableBody');
        tbody.innerHTML = ""; // 清空表格内容

        const start = (page - 1) * rowsPerPage;
        const end = start + rowsPerPage;
        const paginatedData1 = table1Data.slice(start, end);
        const paginatedData2 = table2Data.slice(start, end);

        for (let i = 0; i < paginatedData1.length; i++) {
            const row = document.createElement('tr');

            const cell1 = document.createElement('td');
            const link = document.createElement('a');
            link.href = `your_page.html?id=${paginatedData1[i].imfr_ud_tableid}`;
            link.textContent = paginatedData1[i].imfr_ud_tableid;
            cell1.appendChild(link);
            row.appendChild(cell1);

            const cell2 = document.createElement('td');
            if (paginatedData2[i]) {
                cell2.textContent = paginatedData2[i].imfr_ud_tableid;
            } else {
                cell2.textContent = 'N/A';
            }
            row.appendChild(cell2);

            tbody.appendChild(row);
        }
    }

    function setupPagination() {
        const pagination = document.getElementById('pagination');
        pagination.innerHTML = ''; // 清空分页内容

        // 如果数据少于等于 rowsPerPage 条，则不显示分页
        if (table1Data.length <= rowsPerPage) {
            pagination.style.display = 'none';
            return;
        }

        pagination.style.display = 'flex'; // 确保显示分页

        // 添加“前一页”按钮
        if (currentPage > 1) {
            const prevBtn = document.createElement('button');
            prevBtn.textContent = '前一页';
            prevBtn.addEventListener('click', function () {
                if (currentPage > 1) {
                    currentPage--;
                    displayTableData(currentPage);
                    setupPagination();
                }
            });
            pagination.appendChild(prevBtn);
        }

        // 添加数字按钮
        for (let i = 1; i <= totalPages; i++) {
            const btn = document.createElement('button');
            btn.textContent = i;
            btn.className = i === currentPage ? 'active' : '';
            btn.addEventListener('click', function () {
                currentPage = i;
                displayTableData(currentPage);
                setupPagination(); // 重新设置分页按钮的状态
            });
            pagination.appendChild(btn);
        }

        // 添加“后一页”按钮
        if (currentPage < totalPages) {
            const nextBtn = document.createElement('button');
            nextBtn.textContent = '后一页';
            nextBtn.addEventListener('click', function () {
                if (currentPage < totalPages) {
                    currentPage++;
                    displayTableData(currentPage);
                    setupPagination();
                }
            });
            pagination.appendChild(nextBtn);
        }
    }

    // 初始化页面
    displayTableData(currentPage);
    setupPagination();
</script>

</body>
</html>