如何在jQuery中使用onchange清除DataTable

How to clear DataTable with onchange in jQuery?

本文关键字：onchange 清除 DataTable jQuery      更新时间：2023-09-26

我曾使用fnDestroy（）在更改select元素时清除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
        });
    });
}

有人能告诉我我的代码出了什么问题吗？我无法在每次更改选择时清除dataTable。谢谢你。

您可以尝试先清除数据表，然后销毁它。

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

清除和销毁方法可以这样调用，

var table = $('#example').DataTable();
//clear datatable
table.clear().draw();
//destroy datatable
table.destroy();

参考；

  • 清除API方法
  • 销毁方法

注意：此代码适用于数据表1.10及以上版本

它可能是destroy（）http://datatables.net/reference/api/destroy（）。然后清空tbody。

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

使用此代码清除和销毁数据表

    $('#example1').dataTable().fnClearTable();
    $('#example1').dataTable().fnDraw();
    $('#example1').dataTable().fnDestroy();
相关文章：