title: jQuery datatable fnDrawCallback for row grouping renders slow
body: <p>I am using fnDrawCallback for row grouping but the rendering is really slow on server (acceptable locally). Used FireFox to check on the page and found that the fnDrawCallback that loops through every row took about 7 seconds to group just 5 rows. Data came back quickly and if I remove the row grouping, everything is displayed in an instant.</p>
  
  <p>Any solutions to replace having to loop through every single row during callback to format the rows? Thank you!</p>
  
  <pre><code>"fnDrawCallback": function ( oSettings ) {
      if ( oSettings.aiDisplay.length == 0 )
      {
          return;
      }
  
      var nTrs = $('#example tbody tr');
      var iColspan = nTrs[0].getElementsByTagName('td').length;
      var sLastGroup = "";
      for ( var i=0 ; i&lt;nTrs.length ; i++ )
      {
          var iDisplayIndex = oSettings._iDisplayStart + i;
          var sGroup = oSettings.aoData[ oSettings.aiDisplay[iDisplayIndex] ]._aData[0];
          if ( sGroup != sLastGroup )
          {
              var nGroup = document.createElement( 'tr' );
              var nCell = document.createElement( 'td' );
              nCell.colSpan = iColspan;
              nCell.className = "group";
              nCell.innerHTML = sGroup;
              nGroup.appendChild( nCell );
              nTrs[i].parentNode.insertBefore( nGroup, nTrs[i] );
              sLastGroup = sGroup;
          }
      }
  }
  </code></pre>
  
  <p><strong>FOUND MY SOLUTION (it wasn't the datatables...):</strong></p>
  
  <p>Managed to find out the cause with FireBug - has got nothing to do with the rendering but with the javascripts that had to be loaded before datatable gets rendered. Deferring the rest of the scripts sped up the process! <a href="https://developers.google.com/speed/docs/best-practices/payload?csw=1#DeferLoadingJS" rel="nofollow">https://developers.google.com/speed/docs/best-practices/payload?csw=1#DeferLoadingJS</a></p>
  
  <pre><code>&lt;script type="text/javascript"&gt;
  
   // Add a script element as a child of the body
   function downloadJSAtOnload() {
   var element = document.createElement("script");
   element.src = "deferredfunctions.js";
   document.body.appendChild(element);
   }
  
   // Check for browser support of event handling capability
   if (window.addEventListener)
   window.addEventListener("load", downloadJSAtOnload, false);
   else if (window.attachEvent)
   window.attachEvent("onload", downloadJSAtOnload);
   else window.onload = downloadJSAtOnload;
  
  &lt;/script&gt;
  </code></pre>