title: How to refresh JS datatables using AJAX
body: <p>I am using AJAX to load (and subsequently refresh) a JS datatable (v1.10.0). I don't think I'm doing this properly because while I can get the initial table to load, subsequent AJAX requests do not update the table. </p>
  
  <p>I've tried various combinations of the .clear(), .draw() and .rows.add() JS Datatables methods, but nothing seems to work.</p>
  
  <p>jquery code below:</p>
  
  <pre><code>$(document).ready(function() {
  
      $('#results').html('&lt;table id="table-output" class="display" cellspacing="0" width="100%"&gt;&lt;/table&gt;');
  
      var table_config = {
          "bDestroy": true,
          "paging": false,
          "language": {
              "zeroRecords": "No results found",
              "processing": "&lt;div align='center'&gt;&lt;img src='/static/ajax-loader.gif'&gt;&lt;/div&gt;",
              "loadingRecords": "&lt;div align='center'&gt;&lt;img src='/static/ajax-loader.gif'&gt;&lt;/div&gt;"
          }
      };       
  
      $("form").submit(function(e) {
  
          e.preventDefault();
  
          var form_data = JSON.stringify($(this).serializeArray());
  
          $.ajax({
              type: 'POST',
              url: /the_url,
              data: form_data,
              contentType: 'application/json',
              dataType: 'json',
              success: function(response) {
  
                  table_config.data = response.data;
                  table_config.columns = response.columns;
  
                  $('#table-output').dataTable(table_config);
  
              }
          });
      });
  });
  </code></pre>