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. But when the number of rows exceeded 10,000, I realized I needed to lazy_load the rows otherwise the website would be incredibly slow. I've looked for ways to lazy load rows of a table, but I can't seem to find it anywhere, so my question is simply does the lazyloading plug-in or for rows even exist?

Hope some guru can answer this. Thanks in advance!

Background as to what I'm trying to do: I'm creating the rough sketch of the table in the html code, then during runtime, I will add rows to the table through DOM when the user searches for particular things. When they search it, there will be thousands of results, and I want to lazyload the result into the table.

jQuery provides lazyload for images and containers of images.

Some other plug-ins allowed for lazyloading of divs.

Lazyloading for table rows however seemed to be non-existant.

Some sample code for context:

HTML:

        <fieldset>
        <legend>PhotoViewer v1.6</legend>
        <h4 id = "albumName"><i>Photos</i></h4>
        <table cellspacing="1" border="2" id = "photoTable" class = "lazyProgressiveLoad">
            <tr style="font-style: italic; font-size: small; font-family: Segoe UI Light; color: Red">
                <th>--Photo--</th>
                <th>--Label--</th>
                <th>--Path--</th>
                <th><input type="button" value="Add Photo" onclick="addPhoto()" id = "addPhoto"/></th>
            </tr>
        </table>
    </fieldset>

Looking for some code that will allow the same functionality as the code below for table rows.

Javascript:

$(function() {
      $("img").lazyload({
          effect : "fadeIn"
          /*
          ,appear : function(elements_left, settings) {
              console.log("appear");
              console.log(elements_left);
              //console.log(this, elements_left, settings);
          },
          load : function(elements_left, settings) {
              console.log("load");
              console.log(elements_left);
              //console.log(this, elements_left, settings);
          }
          */
      });
  });

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.