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

html页面展示100条数据库

admin
行业动态
2025-05-01
3055

通过后端查询数据库获取100条数据，用HTML表格循环渲染展示，配合分页组件优化加载，前端可设置每页显示数量控制数据量

数据库准备

假设使用MySQL数据库,表名为items，包含以下字段：

id (主键)
name (名称)
category (分类)
price (价格)
description (描述)

后端数据接口

分页查询逻辑

-示例SQL（MySQL）
SELECT id, name, category, price, description 
FROM items 
LIMIT 10 OFFSET ?;

PHP接口示例

<?php
header('Content-Type: application/json');
$servername = "localhost";
$username = "root";
$password = "";
$dbname = "testdb";
$conn = new mysqli($servername, $username, $password, $dbname);
if ($conn->connect_error) {
    die(json_encode(['error' => 'Database connection failed']));
}
$page = isset($_GET['page']) ? intval($_GET['page']) : 1;
$limit = 10;
$offset = ($page 1)  $limit;
$stmt = $conn->prepare("SELECT id, name, category, price, description FROM items LIMIT ? OFFSET ?");
$stmt->bind_param("ii", $limit, $offset);
$stmt->execute();
$result = $stmt->get_result();
$data = [];
while ($row = $result->fetch_assoc()) {
    $data[] = $row;
}
echo json_encode([
    'data' => $data,
    'total' => $result->num_rows,
    'page' => $page,
    'pages' => ceil($result->num_rows / $limit)
]);
?>

前端HTML页面结构

<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">数据展示</title>
    <style>
        table { width: 100%; border-collapse: collapse; }
        th, td { border: 1px solid #ddd; padding: 8px; }
        th { background-color: #f4f4f4; }
        .pagination { margin: 20px 0; }
        .pagination button { padding: 5px 10px; margin: 0 2px; }
    </style>
</head>
<body>
    <table>
        <thead>
            <tr>
                <th>ID</th>
                <th>名称</th>
                <th>分类</th>
                <th>价格</th>
                <th>描述</th>
            </tr>
        </thead>
        <tbody id="data-table">
            <!-数据通过JS插入 -->
        </tbody>
    </table>
    <div class="pagination" id="pagination">
        <!-分页按钮通过JS生成 -->
    </div>
    <script>
        let currentPage = 1;
        const pageSize = 10;
        function fetchData(page) {
            fetch(`api.php?page=${page}`)
                .then(response => response.json())
                .then(data => {
                    renderTable(data.data);
                    renderPagination(data.pages, data.page);
                });
        }
        function renderTable(data) {
            const tbody = document.getElementById('data-table');
            tbody.innerHTML = '';
            data.forEach(row => {
                const tr = document.createElement('tr');
                tr.innerHTML = `<td>${row.id}</td>
                                <td>${row.name}</td>
                                <td>${row.category}</td>
                                <td>${row.price}</td>
                                <td>${row.description}</td>`;
                tbody.appendChild(tr);
            });
        }
        function renderPagination(totalPages, current) {
            const pagination = document.getElementById('pagination');
            pagination.innerHTML = '';
            // 上一页按钮
            const prevBtn = document.createElement('button');
            prevBtn.textContent = '上一页';
            prevBtn.disabled = current === 1;
            prevBtn.onclick = () => fetchData(current 1);
            pagination.appendChild(prevBtn);
            // 页码按钮
            for (let i = 1; i <= totalPages; i++) {
                const btn = document.createElement('button');
                btn.textContent = i;
                btn.className = i === current ? 'active' : '';
                btn.onclick = () => fetchData(i);
                pagination.appendChild(btn);
            }
            // 下一页按钮
            const nextBtn = document.createElement('button');
            nextBtn.textContent = '下一页';
            nextBtn.disabled = current === totalPages;
            nextBtn.onclick = () => fetchData(current + 1);
            pagination.appendChild(nextBtn);
        }
        // 初始化加载第一页数据
        fetchData(currentPage);
    </script>
</body>
</html>

单元表格渲染逻辑

列名	数据类型	渲染方式	示例值
ID	整数	直接显示	1
名称	字符串	转义HTML特殊字符后显示	iPhone 14
分类	字符串	高亮显示不同分类	电子产品
价格	浮点数	格式化为货币形式显示	￥7,999.00
描述	文本	截断过长文本并添加省略号	“最新款智能手机…”

性能优化方案

后端优化：
- 添加索引：ALTER TABLE items ADD INDEX(id);
- 限制返回字段：SELECT id, name, category, price FROM items
- 使用缓存：Redis缓存热门页数据
前端优化：
- 懒加载：滚动到底部时自动加载下一页
- 虚拟列表：只渲染可视区域的DOM节点
- 压缩传输：启用Gzip压缩API响应