如何用jQuery中的onchange清除DataTable？

我已經使用fnDestroy（）來清除select元素的變化上的dataTable，但它不清除表，而是將數據追加到表中。這是代碼。如何用jQuery中的onchange清除DataTable？

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 
     }); 
    }); 
}

任何一個可以告訴我什麼是錯我的代碼？我無法在每次選擇更改時清除數據表。謝謝你。

來源

2014-10-29 Paul

您可能會嘗試先清除數據表，然後將其銷燬。

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

來源

2014-10-29 15:12:51

你已經釘住了它。謝謝。 :) – Paul 2014-10-30 01:00:54

它可能會破壞（）http://datatables.net/reference/api/destroy()。然後清空tbody。

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

來源

2014-10-29 14:59:40 cforcloud

它給出了一個錯誤，說「destroy（）不是一個函數」。但上面的答案解決了我的問題。不管怎麼說，還是要謝謝你。 :) – Paul 2014-10-30 01:02:25

$（'＃documentsTable tbody'）。empty（）;這解決了我的問題......謝謝:) – HunterrJ 2016-12-13 09:30:41

清理並銷燬方法可以這樣調用，

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

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

//destroy datatable 
table.destroy();

參考;

Clear API方法
Destroy方法

注：此代碼將爲1.10及以上版本的數據表工作。

來源

2016-03-16 09:14:39 Lucky

如何用jQuery中的onchange清除DataTable？

回答

相關問題