推荐大型 HTML 数据表的解决方案？答案

【问题标题】：Recommend A Solution For Large HTML Data Tables?推荐大型 HTML 数据表的解决方案？
【发布时间】：2012-06-19 11:16:08
【问题描述】：

我正在翻新旧版 Java webapp。我重做了一个显示数据库搜索结果的屏幕。搜索可能会产生大量结果。旧版只打印了所有内容。我做得更好，加入了一些 div 和 CSS，以便在需要时出现水平和垂直滚动条。

这不是很好。当垂直滚动多行时，用户会看不到列标题。将列标题放在自己的 div 中并不是一个很好的解决方案，因为有足够多的列也需要水平滚动。用户在垂直滚动结果然后水平滚动列名时会卡住。

有人愿意推荐一个不涉及花钱或不涉及学习全新框架或系统的解决方案吗？

我不需要高功率的东西。就像我写的那样，如果列数减少 2-3，我可能不需要水平滚动，只需将标题放在自己的固定 div 中即可。

【问题讨论】：

签出：stackoverflow.com/questions/1030043/…

标签： html css html-table

【解决方案1】：

我使用数据表来显示表格。是一些 jquery 将平面表转换为可排序、可搜索的漂亮表。

http://datatables.net/

【讨论】：

【解决方案2】：

为什么不每 20 行重复一次列标题，这样当标题滚出屏幕时，您可以将它们进一步向下移动。这可以在您的服务器端脚本中完成。

【讨论】：

【解决方案3】：

您应该在查询中使用分页。例如，当获取第 7 页且页面大小为 10 时，只需从数据库中获取第 61 到 70 条记录。

【讨论】：

【解决方案4】：

一种简单的方法是定期重复标题。下面的代码显示了如何做到这一点，不需要库。该示例构建一个示例大表（100 列，100 行），然后每 10 行克隆一次标题行。

const COLS = 100;
const ROWS = 100;
const HEADER_PERIOD = 10;

const table = document.querySelector("table");

// prepare header template
const header = document.createElement("tr");
header.classList.add("header");
for (let i = 0; i < COLS; i++) {
    const cell = header.insertCell();
    cell.innerText = String.fromCharCode(65 + Math.floor(Math.random() * 26));
}

// make some random rows and columns
for (let j = 0; j < ROWS; j++) {

    // repeat header row periodically so user doesn't get lost
    if (j % HEADER_PERIOD === 0) {
        table.appendChild(header.cloneNode(true));
    }

    const row = table.insertRow();
    for (let i = 0; i < COLS; i++) {
        const cell = row.insertCell();
        cell.innerText = Math.trunc(10 + Math.random() * 90).toFixed();
    }
}

body {
    font-family: monospace, sans-serif;
}
table {
    border-collapse: collapse;
}
th, td {
    padding: 2px;
    border: 1px solid;
    margin: 0;
}
.header {
    background-color: #ccc;
    text-align: center;
    font-weight: bold;
}

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Large table</title>
</head>
<body>

<table>
</table>

</body>
</html>

【讨论】：