2017-07-12 89 views
0

我試圖刷新創建數據表而不重新加載整個頁面。因此,每次我嘗試搜索結果時,都會刷新數據表並給出新結果,而不是添加新行。如果我刪除$('#investmentTable').empty();。它給我所有的結果,但它不刷新我的結果刷新jquery數據表

$('#investmentTable')。empty();只有完全脫離我的數據表,並且不顯示任何結果

<div class="control-group"> 
     <label class="control-label">Enter From Date</label> 
     <div style="width:40%" class="controls"> 
     <input id="fromDate" type="text" name="fromDate" type="text" data-date-format="dd-mm-yyyy" class="datepicker span11"> 
    </div> 
    </div> 
    <div class="control-group"> 
     <label class="control-label">Enter To Date</label> 
     <div style="width:40%" class="controls"> 
     <input id="toDate" type="text" name="toDate" type="text" data-date-format="dd-mm-yyyy" class="datepicker span11"> 
    </div> 
    </div> 
    <div class="form-actions"> 
     <input id="next" class="btn btn-primary" type="button" 
      value="Search" /> 
     <div id="status"></div> 
</div> 
$("#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 < 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: '<""l>t<"F"fp>'      
         }); 
         x.row.add([item.date, item.name, item.email, item.contact.phone, item.account.investedAmount]); 
         x.draw(); 
        } 
        } 
       }, 
       return false; 
}); 
+0

你可以試試這些以供參考嗎? https://datatables.net/blog/2017-06-30 https://datatables.net/media/blog/2017-06-30/onPage.js https://datatables.net/media/blog/2017- 06-30/onPage.css – Plankton

回答

0

你能請動這對於循環創建表出來的代碼。請嘗試下面的代碼。

$("#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) { 
             var x = $('#investmentTable').DataTable({ 
           responsive: true, 
          bJQueryUI: true, 
          scrollX: true, 
          height: "100px", 
          display: "block", 
          sPaginationType: "full_numbers", 
          sDom: '<""l>t<"F"fp>'      
        }); 
       for(var i = 0; i < data.data.length; i++){ 
        var item = data.data[i][0]; 
        x.row.add([item.date, item.name, item.email, item.contact.phone, item.account.investedAmount]); 
        x.draw(); 
       } 
       } 
      }, 
      return false; 
}); 
+0

拋出錯誤無法讀取屬性'aDataSort'未定義 – lowyat2017