html页面如何分页显示

在HTML页面中，可以使用以下方法实现分页显示：

（图片来源网络，侵删）

1、使用HTML的<table>标签创建表格。

2、使用<thead>标签定义表格的表头。

3、使用<tbody>标签定义表格的内容区域。

4、使用<tr>标签定义表格的行。

5、使用<td>标签定义表格的单元格。

6、使用CSS样式对表格进行美化。

7、使用JavaScript或者后端语言实现分页功能。

以下是一个简单的分页显示示例：

<!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;
        }
    </style>
</head>
<body>
    <table>
        <thead>
            <tr>
                <th>姓名</th>
                <th>年龄</th>
                <th>性别</th>
            </tr>
        </thead>
        <tbody id="tableBody">
            <!表格内容 >
        </tbody>
    </table>
    <div id="pagination">
        <!分页按钮 >
    </div>
    <script>
        // 模拟数据
        var data = [
            {name: '张三', age: 18, gender: '男'},
            {name: '李四', age: 20, gender: '女'},
            {name: '王五', age: 22, gender: '男'},
            {name: '赵六', age: 24, gender: '女'},
            {name: '孙七', age: 26, gender: '男'},
            {name: '周八', age: 28, gender: '女'},
            {name: '吴九', age: 30, gender: '男'},
            {name: '郑十', age: 32, gender: '女'}
        ];
        var currentPage = 1; // 当前页码
        var pageSize = 5; // 每页显示的数据条数
        var totalPages = Math.ceil(data.length / pageSize); // 总页数
        var tableBody = document.getElementById('tableBody'); // 获取表格内容区域元素
        var pagination = document.getElementById('pagination'); // 获取分页按钮区域元素
        // 渲染表格内容和分页按钮
        function render() {
            var startIndex = (currentPage 1) * pageSize;
            var endIndex = Math.min(startIndex + pageSize, data.length);
            for (var i = startIndex; i < endIndex; i++) {
                var tr = document.createElement('tr');
                for (var key in data[i]) {
                    var td = document.createElement('td');
                    td.textContent = data[i][key];
                    tr.appendChild(td);
                }
                tableBody.appendChild(tr);
            }
            for (var i = 1; i <= totalPages; i++) {
                var btn = document.createElement('button');
                btn.textContent = i;
                if (i === currentPage) {
                    btn.disabled = true; // 当前页按钮禁用样式
                } else {
                    btn.onclick = function() { // 点击分页按钮切换页码时触发的事件处理函数
                        currentPage = i;
                        render(); // 重新渲染表格内容和分页按钮
                    };
                }
                pagination.appendChild(btn);
            }
        }
        render(); // 初始化渲染表格内容和分页按钮

原创文章，作者：未希，如若转载，请注明出处：https://www.kdun.com/ask/408189.html

本网站发布或转载的文章及图片均来自网络，其原创性以及文中表达的观点和判断不代表本网站。如有问题，请联系客服处理。