Не обновляет данные в успехе AJAX

Question

Я новичок в веб-разработке.Я пытаюсь установить данные на datatable после успеха AJAX.При успешном методе, если данные доступны, они отображаются правильно, но если данные не поступают в успешном методе, предыдущее обновление данных.

$("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}

Answer 1

Просто сделайте его пустым перед каждым вызовом ajax $('#customerTable').empty()

Answer 2

Попробуйте этот код, поскольку вы уже загрузили экземпляр таблицы, затем очистили данные и затем повторно инициализировали

$("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");
    }
  });

Answer 3

Вы можете очистить данные, используя fnClearTable(), если нет данных. Используйте это в успехе AJAX:

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