title: redraw datatable after ajax call
body: <p>I'm having a datatable with filters. I use Ajax every 10 seconds to fetch new data and add new rows to the table. (table data are dynamic in the same page not by ajax)</p>
  
  <pre><code>$(function () {
      setInterval(checkNew,1000*10);
  
      $( "#orderdate" ).datepicker({
          changeMonth: true,
          changeYear: true,
          yearRange: '2013:2050',
          dateFormat:"dd-mm-yy",
          showAnim:"fold"
      });
  
      var table = $('#data').DataTable({
          "lengthMenu": [[-1], ["All"]],
          "bSort": false,
          "paging":   false,
      });
  
      $("#status").change(function() { table.column(4).search($(this).val()).draw() });
  
  });
  
  function checkNew(){
      $.post('getdata.php',{max: $("#lastid").text().trim() }).done(function (data) {
          if( data.trim() !== '' ) {
              $("table#data").prepend(data.trim());
              //need to draw datatable to filter and search new data added to the table
          }
      });
  }
  </code></pre>
  
  <p>As you see i'm trying to update or draw the table with new data so I can filter or search them. If i search for new data it won't be displayed because it wasn't loaded with the DOM. But I can't redraw the table I've tried </p>
  
  <pre><code>$("table#data").DataTable().draw(); // new rows are added but can't be searched or filtered
  </code></pre>
  
  <p>And </p>
  
  <pre><code>$('table#data').dataTable().fnDraw(); //new rows are not added
  </code></pre>
  
  <p>So how to edit the code in anyway to correctly draw the table to filter and search new added data?</p>