没有在ajax成功中刷新数据表答案

【问题标题】：Not refreshing datatable inside ajax success没有在ajax成功中刷新数据表
【发布时间】：2019-05-20 01:59:09
【问题描述】：

我是网络开发的新手。我试图在ajax成功后将数据设置为datatable。在成功方法中，如果数据可用，则正确显示，但如果在成功方法中没有数据，则刷新之前的数据。

$("button#search").click(function() {
  var name = $("#name").val();
  var age = $("#age").val();    
  var url = "/searchCustomer/searchCust";
  $.ajax({
    type : "POST",
    url : url,
    data : {name:name,age:age},
    dataType : 'json',
    beforeSend: beforeSendHandler,
    success : function(data) {  
      var table = $('#customerTable').DataTable( {
        data : data.data,
        columns: [
          {"data": "customerid" },
          {"data": "name"},
          {"data": "mobilenumber"},
          {"data": "status"}
        ],
        "language": {
          "lengthMenu": "View _MENU_ records per page",
          "zeroRecords": "No matching records found",
          "infoEmpty": "No records available",
          "infoFiltered": "(filtered from _MAX_ total records)"
        },
        "pagingType": "full_numbers"
      })
    },
    error : function(e) {
      alert("error");
    }
  });

第一次单击按钮时，如果可用数据正常显示，第二次单击按钮但没有数据在这种情况下旧数据不刷新。

JSON 数据格式： 1.{"data":[{"customerid":"xxxxxxxxxx","name":"Sourabh Yadav","mobilenumber":"XXXXXXXXXXX","status":"In-Active"}]}

2.{"data":null}

【问题讨论】：

如果您有 ID，只需使用它而不是 $("button#search").click(function() { 使用 $("#search").on('click', function() {
为什么您希望旧数据仍然存在 - 当您执行新请求时，如果您没有获得任何数据，那么不会显示任何内容，因为没有任何内容可显示。没有什么会自动为您保存数据，您必须以某种方式自己做；例如在您的 beforeSendHandler 函数中。
@Mark Schultheiss：我也在说同样的话，但旧数据仍在显示，但我不需要它。我认为datatable 不会令人耳目一新。
您必须先删除旧数据，然后在数据表中追加新数据

标签： jquery ajax datatables

【解决方案1】：

如果没有数据，您可以使用fnClearTable() 清除数据表。在ajax成功中使用这个：

var dataTable = $('#customerTable').dataTable();
if (data.data == null) {
    dataTable.fnClearTable();
} else {
    // set your datatable here
}

【讨论】：

【解决方案2】：

在每次 ajax 调用 $('#customerTable').empty() 之前将其设为空即可

【讨论】：

【解决方案3】：

试试这个代码，因为你必须已经加载表实例，然后清空数据，然后重新初始化

$("button#search").click(function() {
  var name = $("#name").val();
  var age = $("#age").val();    
  var url = "/searchCustomer/searchCust";
  $.ajax({
    type : "POST",
    url : url,
    data : {name:name,age:age},
    dataType : 'json',
    beforeSend: beforeSendHandler,
    success : function(data) {  
        if ( $.fn.DataTable.isDataTable('#customerTable') ) {
            $('#customerTable').DataTable().destroy();
        }

        $('#customerTable').empty();

      var table = $('#customerTable').DataTable( {
        data : data.data,
        columns: [
          {"data": "customerid" },
          {"data": "name"},
          {"data": "mobilenumber"},
          {"data": "status"}
        ],
        "language": {
          "lengthMenu": "View _MENU_ records per page",
          "zeroRecords": "No matching records found",
          "infoEmpty": "No records available",
          "infoFiltered": "(filtered from _MAX_ total records)"
        },
        "pagingType": "full_numbers"
      })
    },
    error : function(e) {
      alert("error");
    }
  });

【讨论】：