html table分页

在HTML中，给表格分页可以通过多种方式实现，下面将介绍两种常见的方法：使用HTML的<table>标签和CSS样式来实现表格分页，以及使用JavaScript库（如DataTables）来实现表格分页。

1. 使用HTML的<table>标签和CSS样式实现表格分页

我们需要创建一个包含多个表格行的<table>元素，每个表格行由<tr>元素表示，而每个单元格则由<td>元素表示，为了实现分页效果，我们可以使用CSS样式来隐藏或显示特定的表格行。

以下是一个示例代码，演示如何使用HTML的<table>标签和CSS样式实现表格分页：

<!DOCTYPE html>
<html>
<head>
    <style>
        /* 隐藏第一页以外的所有表格行 */
        .page-1 tr:not(.page-1) {
            display: none;
        }
        /* 隐藏第二页以外的所有表格行 */
        .page-2 tr:not(.page-2) {
            display: none;
        }
        /* 隐藏第三页以外的所有表格行 */
        .page-3 tr:not(.page-3) {
            display: none;
        }
    </style>
</head>
<body>
    <table>
        <!-第一页的表格行 -->
        <tr class="page-1">
            <td>Row 1, Page 1</td>
            <td>Row 2, Page 1</td>
            <td>Row 3, Page 1</td>
        </tr>
        <tr class="page-1">
            <td>Row 4, Page 1</td>
            <td>Row 5, Page 1</td>
            <td>Row 6, Page 1</td>
        </tr>
        <!-第二页的表格行 -->
        <tr class="page-2">
            <td>Row 1, Page 2</td>
            <td>Row 2, Page 2</td>
            <td>Row 3, Page 2</td>
        </tr>
        <tr class="page-2">
            <td>Row 4, Page 2</td>
            <td>Row 5, Page 2</td>
            <td>Row 6, Page 2</td>
        </tr>
        <!-第三页的表格行 -->
        <tr class="page-3">
            <td>Row 1, Page 3</td>
            <td>Row 2, Page 3</td>
            <td>Row 3, Page 3</td>
        </tr>
        <tr class="page-3">
            <td>Row 4, Page 3</td>
            <td>Row 5, Page 3</td>
            <td>Row 6, Page 3</td>
        </tr>
    </table>
    <!-分页按钮 -->
    <button onclick="changePage(1)">Page 1</button>
    <button onclick="changePage(2)">Page 2</button>
    <button onclick="changePage(3)">Page 3</button>
    <!-JavaScript代码 -->
    <script src="script.js"></script>
</body>
</html>

在上面的示例中，我们使用了CSS样式来隐藏除当前页面以外的所有表格行，通过点击不同的分页按钮，可以切换到不同的页面，并显示相应的表格行，在实际应用中，可以根据需要添加更多的页面和表格行。

2. 使用JavaScript库（如DataTables）实现表格分页

除了使用HTML和CSS手动实现表格分页外，还可以使用JavaScript库（如DataTables）来简化操作，DataTables是一个功能强大且易于使用的插件，可以自动为表格添加分页、排序、搜索等功能。

以下是一个示例代码，演示如何使用DataTables库实现表格分页：

<div id="myTable">
    <!-表格内容 -->
    <table id="example" class="display" style="width:100%">
        <!-... -->
    </table>
</div>
<!-JavaScript代码 -->
<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
<script src="https://cdn.datatables.net/1.10.24/js/jquery.dataTables.min.js"></script>
<script src="script.js"></script>

原创文章，作者：K-seo，如若转载，请注明出处：https://www.kdun.cn/ask/393836.html

html table分页

相关推荐

发表回复