当前位置：首页 > 行业动态 > 正文

html 如何分页显示

admin
行业动态
2024-03-31
3016

HTML分页显示是一种常见的网页设计技术，它可以让用户在浏览大量信息时更加方便，在HTML中，我们可以通过以下几种方式来实现分页显示：

1、使用<table>标签和<tr>、<td>标签进行分页显示。

2、使用<div>标签和CSS样式进行分页显示。

3、使用JavaScript或者jQuery库进行分页显示。

下面，我们将详细介绍这三种方法的具体实现步骤。

使用<table>标签和<tr>、<td>标签进行分页显示

我们需要创建一个HTML表格，并在表格中添加数据，我们可以使用<thead>、<tbody>和<tfoot>标签来分别表示表头、表格主体和表尾，接下来，我们可以使用CSS样式来设置表格的分页显示效果。

以下是一个简单的示例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF8">
    <meta name="viewport" content="width=devicewidth, initialscale=1.0">
    <title>分页显示示例</title>
    <style>
        table {
            width: 100%;
            bordercollapse: collapse;
        }
        th, td {
            border: 1px solid black;
            padding: 8px;
            textalign: left;
        }
        th {
            backgroundcolor: #f2f2f2;
        }
        .pagination {
            display: inlineblock;
        }
        .pagination a {
            color: black;
            float: left;
            padding: 8px 16px;
            textdecoration: none;
        }
        .pagination a.active {
            backgroundcolor: #4CAF50;
            color: white;
        }
        .pagination a:hover:not(.active) {
            backgroundcolor: #ddd;
        }
    </style>
</head>
<body>
    <table id="myTable">
        <thead>
            <tr>
                <th>姓名</th>
                <th>年龄</th>
                <th>性别</th>
            </tr>
        </thead>
        <tbody>
            <!在这里添加数据 >
        </tbody>
    </table>
    <div >
        <a href="#" onclick="changePage(1)">首页</a>
        <a href="#" onclick="changePage(2)">上一页</a>
        <a href="#"  onclick="changePage(3)">3</a>
        <a href="#" onclick="changePage(4)">下一页</a>
        <a href="#" onclick="changePage(5)">尾页</a>
    </div>
    <script>
        function changePage(page) {
            // 在这里编写分页逻辑，例如通过Ajax请求获取数据并更新表格内容等
        }
    </script>
</body>
</html>

使用<div>标签和CSS样式进行分页显示

与使用<table>标签类似，我们可以使用<div>标签来创建分页结构，我们可以使用CSS样式来设置分页显示效果，以下是一个简单的示例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF8">
    <meta name="viewport" content="width=devicewidth, initialscale=1.0">
    <title>分页显示示例</title>
    <style>
        .pagination {
            display: inlineblock;
        }
        .pagination a {
            color: black;
            float: left;
            padding: 8px 16px;
            textdecoration: none;
            border: 1px solid #ddd;
        }
        .pagination a.active {
            backgroundcolor: #4CAF50;
            color: white;
            border: 1px solid #4CAF50;
        }
        .pagination a:hover:not(.active) {
            backgroundcolor: #f2f2f2;
        }
    </style>
</head>
<body>
    <!在这里添加需要分页显示的内容 >
    <div >
        <a href="#" onclick="changePage(1)">首页</a>
        <a href="#" onclick="changePage(2)">上一页</a>
        <a href="#"  onclick="changePage(3)">3</a>
        <a href="#" onclick="changePage(4)">下一页</a>
        <a href="#" onclick="changePage(5)">尾页</a>
    </div>
    <script>
        function changePage(page) {
            // 在这里编写分页逻辑，例如通过Ajax请求获取数据并更新页面内容等
        }
    </script>
</body>
</html>

使用JavaScript或者jQuery库进行分页显示

除了使用HTML和CSS实现分页显示外，我们还可以使用JavaScript或者jQuery库来简化分页逻辑，以下是一个简单的示例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF8">
    <meta name="viewport" content="width=devicewidth, initialscale=1.0">
    <title>分页显示示例</title>
    <link rel="stylesheet" href="https://code.jquery.com/ui/1.12.1/themes/base/jqueryui.css">
    <script src="https://code.jquery.com/jquery3.6.0.min.js"></script>
    <script src="https://code.jquery.com/ui/1.12.1/jqueryui.min.js"></script>
    <script>
        $(function () {
            $("#myTable").pagination({}); // 初始化分页插件，这里使用的是jQuery UI的分页插件，你也可以选择其他插件或者自定义分页逻辑。}););function changePage(page) { // 在这里编写分页逻辑，例如通过Ajax请求获取数据并更新表格内容等 } </script></head><body><table id="myTable"><thead><tr><th>姓名</th><th>年龄</th><th>性别</th></tr></thead><tbody></tbody></table><div ></div></body></html>```