刷新jQuery數據表

Question

很多關於這個問題，但我從來沒有找到一個爲我工作。我有一個簡單而簡單的HTML表格，它的身體正在用來自AJAX調用的行填充。 然後我想用DataTable插件更新表，但它不起作用。 我有一個HTML表格，看起來像這樣：頁面加載

$(document).ready(function(){ 
     var oTable = $('#myTable').dataTable({ 
      "aoColumns": [ 
       { "bSortable": false }, 
       null, null, null, null 
      ] 
     }); 
}); 

最後我在下拉列表更改功能

$("#dropdownlist").on("change", function() { 
     $("tbody").empty(); 
      $.ajax({ 
       type: "POST", 
       url: "@Url.Action("ActionHere", "Controller")", 
       dataType: "json", 
       success: function (data) { 
        $.each(data, function (key, item) { 
         $("tbody").append("<tr><td>1</td><td>2</td><td>3</td><td>4</td><td>5</td></tr>"); 
        }); 
       } 
      }) 
     var oTable = $('#myTable').dataTable(); // Nothing happens 
     var oTable = $('#myTable').dataTable({ // Cannot initialize it again error 
       "aoColumns": [ 
        { "bSortable": false }, 
        null, null, null, null 
       ] 
      }); 
     }); 

追加等

<table id="myTable"> 
    <thead> 
    <tr> 
      <th>1</th> 
      <th>2</th> 
      <th>3</th> 
      <th>4</th> 
      <th>5</th> 
    </tr> 
    </thead> 
    <tbody> 
    </tbody> 
</table> 

在我的jQuery已經修改以縮短它等等，所以不要太在意它太多。

基本上問題是如何更新表，我可以做我的AJAX並添加新的數據到表中，但數據表插件不會隨之更新。 我試過其他東西，如

.fnDraw（false）;

但它確實沒有什麼 雖然我從

fnReloadAjax（）

就只是如何刷新表任何線索得到一個JSON錯誤？

Answer 1

試試這個

最初，你初始化表，以便先清除該表

$('#myTable').dataTable().fnDestroy();

然後阿賈克斯成功後重新初始化

$('#myTable').dataTable(); 

像這樣

$("#dropdownlist").on("change", function() { 
     $("tbody").empty(); 
      $.ajax({ 
       type: "POST", 
       url: "@Url.Action("ActionHere", "Controller")", 
       dataType: "json", 
       success: function (data) { 
        $.each(data, function (key, item) { 
         $("tbody").append("<tr><td>1</td><td>2</td><td>3</td><td>4</td><td>5</td></tr>"); 
        }); 
       } 
      }) 
     $('#myTable').dataTable().fnDestroy(); 
     $('#myTable').dataTable({ // Cannot initialize it again error 
       "aoColumns": [ 
        { "bSortable": false }, 
        null, null, null, null 
       ] 
      }); 
     }); 

DEMO

Answer 2

我知道這是舊的文章，但我只是研究這個問題，我覺得要解決它在數據表手冊頁最簡單的方法：https://datatables.net/reference/api/ajax.reload%28%29 所有你需要調用table.ajax。重新加載（）;

Answer 3

我已經做了一些與此有關的事情......下面是一個JavaScript的例子，你需要什麼。在燈架上有一個在這裏演示：http://codersfolder.com/2016/07/crud-with-php-mysqli-bootstrap-datatables-jquery-plugin/

//global the manage member table 
var manageMemberTable; 

function updateMember(id = null) { 
    if(id) { 
     // click on update button 
     $("#updatebutton").unbind('click').bind('click', function() { 
      $.ajax({ 
       url: 'webdesign_action/update.php', 
       type: 'post', 
       data: {member_id : id}, 
       dataType: 'json', 
       success:function(response) { 
        if(response.success == true) {      
         $(".removeMessages").html('<div class="alert alert-success alert-dismissible" role="alert">'+ 
           '<button type="button" class="close" data-dismiss="alert" aria-label="Close"><span aria-hidden="true">&times;</span></button>'+ 
           '<strong> <span class="glyphicon glyphicon-ok-sign"></span> </strong>'+response.messages+ 
          '</div>'); 

         // refresh the table 

         manageMemberTable.ajax.reload(); 

         // close the modal 
         $("#updateModal").modal('hide'); 

        } else { 
         $(".removeMessages").html('<div class="alert alert-warning alert-dismissible" role="alert">'+ 
           '<button type="button" class="close" data-dismiss="alert" aria-label="Close"><span aria-hidden="true">&times;</span></button>'+ 
           '<strong> <span class="glyphicon glyphicon-exclamation-sign"></span> </strong>'+response.messages+ 
          '</div>'); 

         // refresh the table       
         manageMemberTable.ajax.reload(); 

         // close the modal 
         $("#updateModal").modal('hide'); 
        } 
       } 
      }); 
     }); // click remove btn 
    } else { 
     alert('Error: Refresh the page again'); 
    } 
} 

Answer 4

從1.10.0版本開始，你可以使用ajax.reload() API。

var table = $('#myTable').DataTable(); 
table.ajax.reload(); 

記住使用$('#myTable').DataTable()，而不是 $('#myTable').dataTable()

Answer 5

var table = $('#product_table').DataTable({ 
    "bProcessing": true, 
    "serverSide": true, 
    responsive: true, 
    "ajax": { 
     url: get_base_url + "product_table", // json datasource 
     type: "post", // type of method ,GET/POST/DELETE 
     error: function() { 
      $("#employee_grid_processing").css("display", "none"); 
     } 
    } 
}); 

//call this funtion 
$(document).on('click', '#view_product', function() { 
    table.ajax.reload(); 
});