title: How to redraw DataTable with new data
body: <p>I have checked several questions already about this topic here in stackoverflow, but they are all using the old dataTable. I am using DataTable. I populated my DataTable by NOT USING server side, so data are preloaded (JSON) like this : </p>
  
  <pre><code>datatable = $("#datatable").DataTable({
     data  : myData,
     moreoptions : moreoptions
  });
  </code></pre>
  
  <p>I didn't have a problem with that, the DataTable loaded just fine. Now I want to re-populate that <code>myData</code> with new data i uploaded. How to reload the DataTable to reflect the changes?</p>
  
  <p>Here's what I have tried so far :</p>
  
  <pre><code>$('#upload-new-data').on('click', function () {
     myData = NewlyCreatedData; // I console logged this NewlyCreatedData, and it has my uploaded data.
  
     datatable.draw(); // Redraw the DataTable
  });
  </code></pre>
  
  <p>But this doesn't work. I also tried this :</p>
  
  <pre><code>datatable = $("#datatable").DataTable({
     "data"  : myData,
     "drawCallback" : function () {
        myData = NewlyCreatedData;
     },
     "moreoptions" : moreoptions,
  });
  </code></pre>
  
  <p>Then on upload I just call the redraw trigger : </p>
  
  <pre><code>$('#upload-new-data').on('click', function () {
     datatable.draw(); // Redraw the DataTable
  });
  </code></pre>
  
  <p>Still this doesn't work.</p>