title: Initialize two different tables with a single AJAX call
body: <p>I'm trying to render two different tables but with a single <code>AJAX</code> call. </p>
  
  <p>How to initialize two different tables but using the same source of <code>JSON</code> data? 
  The only different of these two tables is that I filter the rows by a specific key in <code>JSON</code>. </p>
  
  <p>Currently my code looks like this.</p>
  
  <pre><code>var t = $('#adminKeysTable').DataTable( {
              "ajax": {
                  "url": getKeysById,
                  "dataSrc": function(json) {
                      var rows = [];
                      for (var i=0;i&lt;json.keys.length;i++) {
                          if (json.keys[i].privileges == '32') 
                              rows.push(json.keys[i]);
                              allAdminKeys.push(json.keys[i].key);
                      }
                      return rows;
                  }
              },
              "columns": [
                  { "data": null },
                  { "data": "name" },
                  { "data": "key" },
                  { "data": null }
              ]               
          } );
  
  var tt = $('#apiAccessKeyTable').DataTable( {
              "ajax": {
                  "url": getKeysById,
                  "dataSrc": function(json) {
                      var rows = [];
                      for (var i=0;i&lt;json.keys.length;i++) {
                          if (json.keys[i].privileges != '32') 
                              rows.push(json.keys[i]);
                      }
                      return rows;
                  }
              },
              "columns": [
                  { "data": null }, 
                  { "data": "name", "className": "editable" }, 
                  { "data": "key" }, 
                  { "data": "externalUser", "className": "editable" }, 
                  { "data": "privilegesArray", "className": "edit-privileges" },
                  { "data": null }, 
                  { "data": null } 
              ]
          } );
  </code></pre>
  
  <p>The issue with my current code is that it tends to take longer time to load the second table after the first one has done loading. I'm assuming that's because I'm making two <code>AJAX</code> calls at the same time?</p>
  
  <p>I'm new to <code>AJAX</code>. So not sure how to make only one call to the <code>GET</code> request, and use that <code>JSON</code> data to initialize two separate tables. </p>
  
  <p>Appreciate if someone can guide me. Thanks.</p>