title: Update the DataTable contents dynamically using jquery
body: <p>I have a HTML table with empty tbody, which gets populated in jquery function on selecting some filters(typically select options). The DataTable is used for pagination if the table elements exceeds the limit. </p>
  
  <p>When the filter is applied for the first time, it works fine. But when the table contents are updated by jquery, DataTable doesn't seem to update it with new data.</p>
  
  <p>HTML looks like:</p>
  
  <pre><code>&lt;table class="table table-striped table-hover outline" id="result" &gt;
      &lt;thead&gt;
         &lt;tr&gt;
             &lt;th&gt;Name&lt;/th&gt;
             &lt;th&gt;ID&lt;/th&gt;
             &lt;th&gt;Age&lt;/th&gt;        
             &lt;th&gt;Department&lt;/th&gt;  
         &lt;/tr&gt;
      &lt;/thead&gt;
      &lt;tbody&gt;
      &lt;/tbody&gt;
  &lt;/table&gt;
  </code></pre>
  
  <p>And the Jquery function:</p>
  
  <pre><code>$(document).ready(function(){
  
      function filterData(list) {
  
          /*filter and send updated list*/
  
          return list;
      }
  
      /* some other code */
      data = filterData(rawData); //Function will filter the data
  
      var html = ''; //html part to be appended in the results table
  
      data.forEach(function(d) {
          html += '&lt;tr&gt;'; //create a table row
          for (var key in d) 
              html += '&lt;td&gt;'+ d[key] +'&lt;/td&gt;';   //put all elements in the columns
          html += '&lt;/tr&gt;';     
      });
  
      $("#result tbody").html(html); //display the result in table body
  
      $('#result').DataTable({
          scrollY:"300px",
          lengthMenu: [10,15,20]
      });
  
  });
  </code></pre>
  
  <p>Any possible way to update the DataTable with new contents? Thanks in advance!</p>