title: Use JQuery to dynamically load thousands of rows into table
body: <p>I'm working on a front-facing GUI for a CRM. We have a tiered structure of customers. Each customer has many addresses that they bill to, many addresses that they ship-to, and many contacts associated with each account. The issue I'm having is that some customers have well over 10,000 ship-to's associated with the account. This becomes a problem when calling for all of them at once. I have the backend fine, it gets all of the ship-to data in ~280ms (on average.) I'm using Javascript to load all of the information into the table. Here's what I'm doing currently: </p>
  
  <pre><code>    var r = new Array();
  var j = -1, recordID;
  r[++j] = '';
  
      //Loop through the data and build an array.
      for (i in data) {
          var d = data[i];
              recordID = d.id;
          r[++j] = '&lt;tr&gt;';
          r[++j] = '&lt;td&gt;'+ d['ADDRESS_LINE_1'] +'&lt;/td&gt;';
          r[++j] = '&lt;/tr&gt;';
      }
      //The line below joins the array and appends it to the table.
      $('#table').append(r.join(''));
  </code></pre>
  
  <p>I've talked with the people who build the specs for me, and they <strong>need</strong> all of them to show at once, there's no possibility of filtering. Right now it's taking ~4s before all of the data is loaded and the modal opens. </p>
  
  <p><em>Is there a faster way to do this?</em></p>