Question

我正在翻新遗留的Java webapp。我重新设置了一个显示数据库搜索结果的屏幕。搜索可能会产生大量结果。旧版本只打印了所有内容。我通过放入一些div和CSS来更好地使用，以便在需要时显示水平和垂直滚动条。

这不是很好。当垂直滚动许多行时，用户会看不到列标题。将列标题放在它们自己的div中并不是一个很好的解决方案，因为JUST ENOUGH列也需要水平滚动。用户将无法垂直滚动结果，然后水平滚动列名称。

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

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

Answer 1

我使用数据表来显示表格。这是一些jquery将平面表变成可排序，可搜索的漂亮的表格。

http://datatables.net/

Answer 2

为什么不重复列标题说每20行所以当标题滚动离开屏幕时，你需要进一步向下。这可以在您的服务器端脚本中完成。

Answer 3

您应该在查询中使用分页。例如，当提取第7页和页面大小为10时，只能从数据库中提取记录号61到70.

Answer 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>

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

4 个答案: