title: Refresh jquery Data table
body: <p>I am trying to refresh the create data table without reloading the whole page. So, everytime I try to search for a result, it will refresh the data table and give a new result and not add a new row instead. If i remove the <code>$('#investmentTable').empty();</code>. It gives me the all the result but it does not refresh my result</p>
  
  <blockquote>
    <p>$('#investmentTable').empty(); only clears my data table completely and doesn't display any result</p>
  </blockquote>
  
  <pre><code> &lt;div class="control-group"&gt;
        &lt;label class="control-label"&gt;Enter From Date&lt;/label&gt;
        &lt;div style="width:40%" class="controls"&gt;
          &lt;input id="fromDate" type="text" name="fromDate" type="text" data-date-format="dd-mm-yyyy" class="datepicker span11"&gt;
      &lt;/div&gt;
      &lt;/div&gt;
      &lt;div class="control-group"&gt;
        &lt;label class="control-label"&gt;Enter To Date&lt;/label&gt;
        &lt;div style="width:40%" class="controls"&gt;
          &lt;input id="toDate" type="text" name="toDate" type="text" data-date-format="dd-mm-yyyy" class="datepicker span11"&gt;
      &lt;/div&gt;
      &lt;/div&gt;
      &lt;div class="form-actions"&gt;
          &lt;input id="next" class="btn btn-primary" type="button"
              value="Search" /&gt;
          &lt;div id="status"&gt;&lt;/div&gt;
  &lt;/div&gt;
  $("#next").on("click",function(event) {
   $('#investmentTable').empty();
  
              $.ajax({
                  type: 'POST',
                  url: app.api+'admin/report/date',
                  data: {
                      fromDate: $('#fromDate').val(),
                      toDate: $('#toDate').val()
                  },
                  success: function(data)
                  {
                      if (data.result == true) {
                      for(var i = 0; i &lt; data.data.length; i++){
                          var item = data.data[i][0];
  
                          var x = $('#investmentTable').DataTable({
                                      responsive: true, 
                                  bJQueryUI: true,
                                  scrollX: true,
                                  height: "100px",
                                  display: "block",
                                  sPaginationType:  "full_numbers",
                                  sDom: '&lt;""l&gt;t&lt;"F"fp&gt;'                       
                          });
                          x.row.add([item.date, item.name, item.email, item.contact.phone, item.account.investedAmount]);
                          x.draw();
                      }
                      }
                  },
                  return false;
  });
  </code></pre>