Javascript 如何在 jQuery 中使用 onchange 清除 DataTable？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/26632332/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How to clear DataTable with onchange in jQuery?
提问by Paul
I have used fnDestroy() to clear the dataTable on change of a select element, but it doesn't clear the table, instead it appends the data into the table. Here's the code.
我已经使用 fnDestroy() 在更改选择元素时清除 dataTable，但它不会清除表，而是将数据附加到表中。这是代码。
HTML:
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
});
});
}
Can any one tell me what is wrong with my code? I can't get to clear the dataTable in every change of selection. Thank you ahead.
谁能告诉我我的代码有什么问题？我无法在每次更改选择时清除数据表。先谢谢了。
回答by Kursad Gulseven
You may try to clear the datatable first and then destroy it.
您可以尝试先清除数据表，然后再销毁它。
dataTable.fnClearTable();
dataTable.fnDraw();
dataTable.fnDestroy();
回答by Lucky
Clear and destroy methods could be called like this,
可以像这样调用清除和销毁方法，
var table = $('#example').DataTable();
//clear datatable
table.clear().draw();
//destroy datatable
table.destroy();
Reference;
参考;
Note: This code will work for datatable version 1.10 and above.
注意：此代码适用于数据表版本 1.10 及更高版本。
回答by cforcloud
It could be destroy() http://datatables.net/reference/api/destroy(). Then empty the tbody.
它可能是 destroy() http://datatables.net/reference/api/destroy()。然后清空 tbody。
$('#documentsTable').dataTable().destroy();
$('#documentsTable tbody').empty();
回答by Arun Thimas
Use This Code to clear and destroy datatable
使用此代码清除和销毁数据表
$('#example1').dataTable().fnClearTable();
$('#example1').dataTable().fnDraw();
$('#example1').dataTable().fnDestroy();
