Recommend A Solution For Large HTML Data Tables? [closed]

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: stackoverflow.com/questions/1030043/…

Ryan B
– Ryan B

2012-06-16 20:18:51 +00:00
Commented Jun 16, 2012 at 20:18 — Ryan B
– Ryan B, Commented Jun 16, 2012 at 20:18

cantaffordavan · Accepted Answer · 2012-06-16 20:18:51Z

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

http://datatables.net/

Atif · Accepted Answer · 2012-06-16 21:09:31Z

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.

chris_code · Accepted Answer · 2012-06-16 20:19:13Z

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.

Lucio Paiva · Accepted Answer · 2018-12-31 22:50:20Z

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>

Collectives™ on Stack Overflow

Recommend A Solution For Large HTML Data Tables? [closed]

4 Answers 4

Comments

Comments

Comments

Comments

Linked

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

Comments

Comments

Comments

Comments

Linked

Related