Recommend A Solution For Large HTML Data Tables?

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.

edited Dec 31 '18 at 21:48

Brian Tompsett - 汤莱恩

4,2231338101

asked Jun 16 '12 at 20:12

Steve

1,172124584

Check out: stackoverflow.com/questions/1030043/…

– Ryan B
Jun 16 '12 at 20:18

add a comment |

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

edited Dec 31 '18 at 21:48

Brian Tompsett - 汤莱恩

4,2231338101

asked Jun 16 '12 at 20:12

Steve

1,172124584

Check out: stackoverflow.com/questions/1030043/…

– Ryan B
Jun 16 '12 at 20:18

add a comment |

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

edited Dec 31 '18 at 21:48

Brian Tompsett - 汤莱恩

4,2231338101

asked Jun 16 '12 at 20:12

Steve

1,172124584

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

html css html-table

edited Dec 31 '18 at 21:48

Brian Tompsett - 汤莱恩

4,2231338101

asked Jun 16 '12 at 20:12

Steve

1,172124584

edited Dec 31 '18 at 21:48

Brian Tompsett - 汤莱恩

4,2231338101

asked Jun 16 '12 at 20:12

Steve

1,172124584

edited Dec 31 '18 at 21:48

Brian Tompsett - 汤莱恩

4,2231338101

edited Dec 31 '18 at 21:48

Brian Tompsett - 汤莱恩

4,2231338101

edited Dec 31 '18 at 21:48

Brian Tompsett - 汤莱恩

4,2231338101

asked Jun 16 '12 at 20:12

Steve

1,172124584

asked Jun 16 '12 at 20:12

Steve

1,172124584

asked Jun 16 '12 at 20:12

Steve

1,172124584

Check out: stackoverflow.com/questions/1030043/…

– Ryan B
Jun 16 '12 at 20:18

add a comment |

Check out: stackoverflow.com/questions/1030043/…

– Ryan B
Jun 16 '12 at 20:18

Check out: stackoverflow.com/questions/1030043/…

– Ryan B
Jun 16 '12 at 20:18

add a comment |

4 Answers
4

active

oldest

votes

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

cantaffordretail

80622042

add a comment |

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

47449

add a comment |

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

193319

add a comment |

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>

answered Dec 31 '18 at 22:50

Lucio Paiva

6,63523755

add a comment |

Your Answer

StackExchange.ifUsing("editor", function () {
StackExchange.using("externalEditor", function () {
StackExchange.using("snippets", function () {
StackExchange.snippets.init();
});
});
}, "code-snippets");

StackExchange.ready(function() {
var channelOptions = {
tags: "".split(" "),
id: "1"
};
initTagRenderer("".split(" "), "".split(" "), channelOptions);

StackExchange.using("externalEditor", function() {
// Have to fire editor after snippets, if snippets enabled
if (StackExchange.settings.snippets.snippetsEnabled) {
StackExchange.using("snippets", function() {
createEditor();
});
}
else {
createEditor();
}
});

function createEditor() {
StackExchange.prepareEditor({
heartbeatType: 'answer',
autoActivateHeartbeat: false,
convertImagesToLinks: true,
noModals: true,
showLowRepImageUploadWarning: true,
reputationToPostImages: 10,
bindNavPrevention: true,
postfix: "",
imageUploader: {
brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
allowUrls: true
},
onDemand: true,
discardSelector: ".discard-answer"
,immediatelyShowMarkdownHelp:true
});

}
});

draft saved

draft discarded

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Post as a guest

Name

Required, but never shown

StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f11066698%2frecommend-a-solution-for-large-html-data-tables%23new-answer', 'question_page');
}
);

Post as a guest

Name

Required, but never shown

4 Answers
4

active

oldest

votes

4 Answers
4

active

oldest

votes

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

cantaffordretail

80622042

add a comment |

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

cantaffordretail

80622042

add a comment |

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

cantaffordretail

80622042

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

cantaffordretail

80622042

answered Jun 16 '12 at 20:18

cantaffordretail

80622042

answered Jun 16 '12 at 20:18

cantaffordretail

80622042

answered Jun 16 '12 at 20:18

cantaffordretail

80622042

add a comment |

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

47449

add a comment |

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

47449

add a comment |

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

47449

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

47449

answered Jun 16 '12 at 20:19

chris_code

47449

answered Jun 16 '12 at 20:19

chris_code

47449

answered Jun 16 '12 at 20:19

chris_code

47449

add a comment |

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

193319

add a comment |

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

193319

add a comment |

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

193319

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

193319

answered Jun 16 '12 at 21:09

Atif

193319

answered Jun 16 '12 at 21:09

Atif

193319

answered Jun 16 '12 at 21:09

Atif

193319

add a comment |

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>

answered Dec 31 '18 at 22:50

Lucio Paiva

6,63523755

add a comment |

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>

answered Dec 31 '18 at 22:50

Lucio Paiva

6,63523755

add a comment |

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>

answered Dec 31 '18 at 22:50

Lucio Paiva

6,63523755

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>

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>

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>

answered Dec 31 '18 at 22:50

Lucio Paiva

6,63523755

answered Dec 31 '18 at 22:50

Lucio Paiva

6,63523755

answered Dec 31 '18 at 22:50

Lucio Paiva

6,63523755

answered Dec 31 '18 at 22:50

Lucio Paiva

6,63523755

add a comment |

draft saved

draft discarded

Thanks for contributing an answer to Stack Overflow!

Please be sure to answer the question. Provide details and share your research!

But avoid …

Asking for help, clarification, or responding to other answers.

Making statements based on opinion; back them up with references or personal experience.

To learn more, see our tips on writing great answers.

draft saved

draft discarded

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Post as a guest

Name

Required, but never shown

Post as a guest

Name

Required, but never shown

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Post as a guest

Name

Required, but never shown

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Post as a guest

Name

Required, but never shown

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Post as a guest

Name

Required, but never shown

Name

Required, but never shown

Name

Required, but never shown

This page is only for reference, If you need detailed information, please check here

搜尋此網誌

Bdtjtk