title: How can I change the data of DataTables after it has been initialized?
body: <p>I want to populate a <a href="http://datatables.net/" rel="noreferrer">datatables</a> based on an ajax request.</p>
  
  <p>Here is what I have done</p>
  
  <pre><code>   $(function(e) {
  
          $('#CampaignMenu').change(function(e) {
  
              $('#ReportWrapper').hide();
  
  
              if (  $(this).val() != '0') {
                  $('#DisplayReport').attr('disabled', false);
              } else {
                  $('#DisplayReport').attr('disabled', true);
              }
  
          });
  
          $('#DisplayReport').click(function (e) {
  
              $.ajax({
                  type: 'GET',
                  url: '/getdata',
                  data: { 'campaign_id': $('#CampaignMenu').val() },
                  dataType: 'json',
                  success: function (json) {
  
                      $('#reportTable').DataTable({
                          data: json,
                          pageLength: 50,
                          lengthMenu: [10, 25, 50, 75, 100, 250, 500, 1000],
                          searching: false,
                          order: [   [ 2, 'desc' ]  ],
                          columns: [
                              { data: 'chain_name', title: 'Chain Name' },
                              { data: 'store_id' , title: 'Store Number' },
                              { data: 'completed', title: 'Total Surveys Completed' },
                              { data: 'initial_quota', title: 'Target Surveys To Complete' },
                              { data: 'total_callable', title: 'Total Call In The Dialer Queue' },
                              { data: 'current_status', title: 'Current Quota Status' },
                          ]
                      });
  
                      $('#ReportWrapper').show();
  
                  }
              });
  
          });
  
      });
  
  &lt;/script&gt;
  </code></pre>
  
  <p>The first request works with no problem. However, when I call the ajax request the second time, I get this error</p>
  
  <pre><code>DataTables warning: table id=reportTable - Cannot reinitialise DataTable. For more information about this error, please see http://datatables.net/tn/3
  </code></pre>
  
  <p>How can I change the table content after it has been initialized?</p>
  
  <p>I thought of initializing the datatable on the page loads, then call some event to populate it later with in my Ajax request. But, I need an event to call from my ajax request.</p>
  
  <pre><code>    $(window).load(function (e) {
  
          $('#reportTable').DataTable({
              pageLength: 50,
              lengthMenu: [10, 25, 50, 75, 100, 250, 500, 1000],
              searching: false,
              order: [   [ 2, 'desc' ]  ],
              columns: [
                  { data: 'chain_name', title: 'Chain Name' },
                  { data: 'store_id' , title: 'Store Number' },
                  { data: 'completed', title: 'Total Surveys Completed' },
                  { data: 'initial_quota', title: 'Target Surveys To Complete' },
                  { data: 'total_callable', title: 'Total Call In The Dialer Queue' },
                  { data: 'current_status', title: 'Current Quota Status' }
               ]
          });
      });
  </code></pre>
  
  <p>I tried to destroy the table before I reinitialize it, but that is not working.</p>
  
  <pre><code>$('#reportTable').DataTable().destroy();
  </code></pre>
  
  <p><strong>UPDATED</strong></p>
  
  <p>I found a way to add data to the table after I initialized it. But I need a way to clear the data first so I won't have duplicates data. </p>
  
  <p>Here is what I have done to add data</p>
  
  <pre><code>           var table = $('#reportTable').dataTable();
  
                  table.fnAddData(json);
  </code></pre>
  
  <p>Te previous code keeps appending data to the table, but it does not clear existing data first causing duplicates. I tried to add before I add the following code <code>[table.clear().draw()][2]</code> but that gives me an error</p>
  
  <blockquote>
    <p>TypeError: table.clear is not a function</p>
  </blockquote>
  
  <p>How can I correctly get the DataTable to change it's content over and over on the fly?</p>