title: Refresh jQuery DataTable from DOM - NO AJAX
body: <p>I have an HTML table that is completely prepopulated by the server; there is no AJAX anywhere on the page.  </p>
  
  <p>I have javascript code that lets me move rows between this table and another one (which starts out empty).</p>
  
  <p>The data set is small enough that there's no need for Ajax pagination, but large enough that the sorting/filtering stuff in DataTable is useful.  So I turned the first table into a a DataTable.</p>
  
  <p>Problem: rows I move to the second table are still affected by the data table code after I move them; any new searching or sorting or filtering on the first table empties the second table. </p>
  
  <p>So what I'd like to be able to do is modify the table underlying the DataTable and then refresh it - have it re-analyze the table as it exists in the DOM and rebuild its state from that.  Preferably without losing its current search string, sort order, etc. </p>
  
  <p>I tried using the DataTable API to remove and add rows, but it didn't help - even after removing and redrawing, a search for the content of the removed row causes it to reappear.</p>
  
  <p>Any help appreciated.</p>
  
  <p>Here's the original row-moving code:</p>
  
  <pre><code>var top    = $('#top');
  var bottom = $('#bottom');
  $('body').on('click', 'input:checkbox', function(ev) {
    var box = $(ev.currentTarget);
    var tr = box.closest('tr');
    var table = tr.closest('table');
  
    var to;
    if (table.attr('id') == 'top' &amp;&amp; checkbox.checked) {
      to = bottom;
    } else {
      to = top;
    }
    to.append(tr);
  });
  </code></pre>
  
  <p>Ok, I was able to get it working using the DataTable API.  Thanks!</p>