Comment effacer DataTable avec onchange en jQuery?

J'ai utilisé fnDestroy() pour effacer le dataTable sur le changement d'un élément select, mais, il n'est pas évident de la table, au lieu de cela, il ajoute les données dans la table. Voici le code.

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

Quelqu'un peut-il me dire quel est le problème avec mon code? Je n'arrive pas à effacer le dataTable à chaque changement de sélection.
Je vous remercie à l'avance.

OriginalL'auteur Paul | 2014-10-29

  1. 12

    Vous pouvez essayer d'effacer le datatable d'abord et ensuite à le détruire.

    dataTable.fnClearTable();
dataTable.fnDraw();
dataTable.fnDestroy();
    Vous avez cloué. Merci. 🙂
    C'est bon pour la dataTable version 1.9 (pour une ancienne base de code, je suis maintenant)

    OriginalL'auteur Kursad Gulseven

  2. 7

    Claire et détruire des méthodes peut être appelée comme cela,

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

    De référence;

    Remarque: Ce code fonctionne pour datatable version 1.10 et au-dessus.

    Ce travail pour moi

    OriginalL'auteur Lucky

  3. 1

    Il pourrait être destroy() http://datatables.net/reference/api/destroy(). Videz ensuite la tbody.

    $('#documentsTable').dataTable().destroy();
$('#documentsTable tbody').empty();
    Il donne une erreur qui dit "destroy() n'est pas une fonction". Mais la réponse ci-dessus a résolu mon problème. Merci de toute façon. 🙂
    $('#documentsTable tbody').empty(); Cela a résolu mon problème... Merci 🙂

    OriginalL'auteur cforcloud