Как очистить DataTable с помощью onchange в jQuery?

Question

Я использовал fnDestroy(), чтобы очистить dataTable от изменения элемента select, но он не очищает таблицу, вместо этого он добавляет данные в таблицу. Вот код.

HTML:

<div class="col-sm-2"> 
    <select class="form-control" id="changeView"> 
     <option value="1">All</option> 
     <option value="2">Compiled</option> 
     <option value="3">On-Going</option> 
     <option value="4">Cancelled</option> 
    </select> 
</div> 

<table class="table table-condensed" id="documentsTable"> 
    <thead> 
     <tr> 
      <th>From</th> 
      <th>Status</th> 
      <th>Subject</th> 
      <th>Date Received</th> 
      <th>Due Date</th> 
      <th>Actions</th> 
     </tr> 
    </thead> 
    <tbody> 

    </tbody> 
</table> 

JQuery:

$('#changeView').on('change', function() { 
    var value = $(this).val(); 
    var change = ''; 
    if (value === '1') { 
     change = 'All'; 
    } else if (value === '2') { 
     change = 'Compiled'; 
    } else if (value === '3') { 
     change = 'On-Going'; 
    } else if (value === '4') { 
     change = 'Cancelled'; 
    } 

    loadDocuments(change); 
}); 

function loadDocuments(change) { 
    $('#documentsTable').dataTable().fnDestroy(); 

    $.post(base_url + "admin/document/getAllDocuments", {change: change}, function(response, status) { 
     var result = JSON.parse(response); 

     $.each(result, function(i, field) { 
      var dateReceived = format_mysqldate(field['dateReceived']); 
      var dueDate = format_mysqldate(field['dueDate']); 

      $('#documentsTable tbody').append('<tr><td>' + field['from'] + '</td><td>' + field['status'] + '</td><td>' + field['subject'] + '</td><td>' + dateReceived + '</td><td>' + dueDate + 
        '</td><td><div class="visible-md visible-lg visible-sm visible-xs btn-group">' + 
        '<a href="' + base_url + 'admin/document/view/' + field['id'] + '" class="btn btn-primary btn-xs" title="View Details" data-toggle="tooltip"><i class="glyphicon glyphicon-search"></i></a>' + 
        '<a href="' + base_url + 'admin/document/edit/' + field['id'] + '" class="btn btn-success btn-xs" title="Edit Document" data-toggle="tooltip"><i class="glyphicon glyphicon-pencil"></i></a>' + 
        '</div></td></tr>'); 
     }); 
     $('#documentsTable').dataTable({ 
      "aoColumns": [ 
       null, 
       null, 
       null, 
       null, 
       null, 
       {"bSortable": false} 
      ], 
      "order": [[3, "desc"]], 
      "bDestroy": true 
     }); 
    }); 
} 

Может ли одно сказать мне, что случилось с моим кодом? Я не могу очистить dataTable в каждом изменении выбора. Спасибо вам заранее.

Answer 1

Сначала вы можете попытаться очистить данные, а затем уничтожить его.

dataTable.fnClearTable(); 
dataTable.fnDraw(); 
dataTable.fnDestroy(); 

Answer 2

Это может быть разрушение() http://datatables.net/reference/api/destroy(). Затем опустошите труп.

$('#documentsTable').dataTable().destroy(); 
$('#documentsTable tbody').empty(); 

Answer 3

Четкие и разрушающие методы можно назвать, как это,

var table = $('#example').DataTable(); 

//clear datatable 
table.clear().draw(); 

//destroy datatable 
table.destroy(); 

Reference;

• Clear метод API
• Destroy метод

Примечание: Этот код будет работать для DataTable версии 1.10 и выше.