Recommend A Solution For Large HTML Data Tables?

Question

I'm renovating a legacy Java webapp. I redid a screen that displays the results of a database search. The search can potentially produce a large number of results. The legacy version just printed everything. I went one better by putting in some divs and CSS such that horizontal and vertical scrollbars appear when needed.

This is not so great. The user loses sight of the column headers when scrolling vertically through many rows. Putting the column headers in their own div is not a great solution, as there are JUST ENOUGH columns to require horizontal scrolling too. The user would get stuck scrolling the results vertically and then scrolling the column names horizontally.

Would anyone care to recommend a solution that will not involve spending money or involve learning a whole new framework or system?

I don't need something high powered. Like I wrote, if the number of columns were just 2-3 fewer I probably wouldn't need horizontal scrolling and could just put the headers in their own stationary div.

Check out: http://stackoverflow.com/questions/1030043/html-table-headers-always-visible-at-top-of-window-when-viewing-a-large-table/7718235#7718235 — Ryan B, Jun 16 '12 at 20:18

score 9 · Accepted Answer · answered Jun 16 '12 at 20:18

9

I use datatables to display tables. It is some jquery that turns plane tables into sortable, searchable nicely looking tables.

http://datatables.net/

answered Jun 16 '12 at 20:18

cantaffordavan

1,427
4
24
44

score 1 · Answer 2 · answered Jun 16 '12 at 21:09

1

You should be using paging in your query. For example when fetching page 7 and page size is 10, only record number 61 to 70 must be fetched from database.

answered Jun 16 '12 at 21:09

Atif

424
7
23

score 0 · Answer 3 · answered Jun 16 '12 at 20:19

0

Why not repeat the column headers say every 20 rows so when the headers have scrolled off the screen you have them further down to. This could be done in your server side script.

answered Jun 16 '12 at 20:19

chris_code

1,214
9
10

score 0 · Answer 4 · answered Dec 31 '18 at 22:50

One easy way to go is to just repeat headers periodically. The code below shows how to do it, no libraries required. The sample builds a sample huge table (100 columns, 100 rows) and then just clones the header row every 10 rows.

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>

Recommend A Solution For Large HTML Data Tables?

4 Answers4