title: How to do jQuery DataTables server side data with Google Apps Script
body: <p>DataTables works fine with GAS HTMLService when the data is provided on initial page load but better practice for GAS is to "Load data asynchronously, not in templates". Also server-side processing for DataTables provides a more responsive UI for large datatables. I am looking for a pattern that satisfies these recommendations. I am starting from an elementary DataTables example translated into GAS HTMLService Template model.</p>
  
  <p>GS Code:</p>
  
  <pre><code> function doGet() {
     Logger.log("Start");
     var start = new Date();
     // rt params
     // var rtParameters = getRunTimeParameters(request);
     // uses HtmlService to send page based on a template
     var temp = HtmlService.createTemplateFromFile('chart');
     // prepare data for initial page
  
     Logger.log("TIME to return:"+ (new Date() -start));
     return temp.evaluate();
   }
  
    function include(filename) {
      // helper function to load html into template from sep files in project
      return HtmlService.createHtmlOutputFromFile(filename)
      .getContent();
    }
  </code></pre>
  
  <p>HTMLtemplate - chart</p>
  
  <pre><code>   ...
     &lt;body&gt;
     &lt;h1&gt;JQUERY  DataTables  Page  Generated in Google Apps Script &lt;/h1&gt;
     &lt;p&gt;Includes sorting, paging and filtering by default.&lt;/p&gt;
     &lt;p&gt;Entire data table loaded in one hit.&lt;/p&gt;
     &lt;div id="demo"&gt;&lt;/div&gt;
     &lt;?!= include('JavaScript'); ?&gt;
     &lt;/body&gt;
  </code></pre>
  
  <p>Javascript (with Datatable definition inline)</p>
  
  <pre><code>&lt;link rel="stylesheet" type="text/css" href="http://ajax.aspnetcdn.com/ajax/jquery.dataTables/1.9.4/css/jquery.dataTables.css"&gt;
  &lt;script type="text/javascript" charset="utf8" src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"&gt;&lt;/script&gt;
  &lt;script type="text/javascript" charset="utf8" src="http://ajax.aspnetcdn.com/ajax/jquery.dataTables/1.9.4/jquery.dataTables.min.js"&gt;&lt;/script&gt;
  &lt;script type="text/javascript" charset="utf8"&gt;
  $(document).ready(function() {
  $('#demo').html( '&lt;table cellpadding="0" cellspacing="0" border="0" class="display" id="example"&gt;&lt;/table&gt;' );
  $('#example').dataTable( {
         "aaData": [
          /* Reduced data set */
          [ "Trident", "Internet Explorer 4.0", "Win 95+", 4, "X" ],
          [ "Trident", "Internet Explorer 5.0", "Win 95+", 5, "C" ],
          [ "Trident", "Internet Explorer 5.5", "Win 95+", 5.5, "A" ],
          [ "Trident", "Internet Explorer 6.0", "Win 98+", 6, "A" ],
          [ "Trident", "Internet Explorer 7.0", "Win XP SP2+", 7, "A" ],
          [ "Gecko", "Firefox 1.5", "Win 98+ / OSX.2+", 1.8, "A" ],
          [ "Gecko", "Firefox 2", "Win 98+ / OSX.2+", 1.8, "A" ],
          [ "Gecko", "Firefox 3", "Win 2k+ / OSX.3+", 1.9, "A" ],
          [ "Webkit", "Safari 1.2", "OSX.3", 125.5, "A" ],
          [ "Webkit", "Safari 1.3", "OSX.3", 312.8, "A" ],
          [ "Webkit", "Safari 2.0", "OSX.4+", 419.3, "A" ],
          [ "Webkit", "Safari 3.0", "OSX.4+", 522.1, "A" ]
      ],
      "aoColumns": [
          { "sTitle": "Engine" },
          { "sTitle": "Browser" },
          { "sTitle": "Platform" },
          { "sTitle": "Version", "sClass": "center" },
          { "sTitle": "Grade", "sClass": "center" }
      ]
  
  } );   
  </code></pre>
  
  <p>} );
    </p>
  
  <p>Initial problem: how to load DataTable 'aaData' asynchronously per <a href="https://developers.google.com/apps-script/guides/html-service-best-practices#load_data_asynchronously_not_in_templates" rel="nofollow">https://developers.google.com/apps-script/guides/html-service-best-practices#load_data_asynchronously_not_in_templates</a></p>
  
  <p>More generally: how to implement DataTAbles server-side processing with GAS.</p>