How to lazyload a standard html table that has many rows?

Question

Instead of using a table plugin by someone else, I choose to do it the standard HTML way of making Tables and rows etc etc. I would fetch data from a database to fill the rows.

Answer 1

Having thousands of rows of data in the DOM is an awful idea for one simple reason: the DOM is slow.

Instead, only render the rows that need to be visible. When a row goes out of view, remove it from the DOM.

My favorite library for displaying a grid of data is SlickGrid. By only rendering DOM elements for the data in the viewport, it can display effectively unlimited amounts data with astounding performance. (That example displays a half-million rows!)

There are more examples that show off SlickGrid's features, but you'll be especially interested in the AJAX loading example, where small chunks of rows are streamed from the server as you scroll.