web-dev-qa-db-fra.com

Tableaux de données clear tbody

J'ai un tableau HTML que je remplis avec des données d'un appel AJAX jQuery. Ce tableau utilise le plug-in jQuery - des tables de données pour la pagination, le tri et ainsi de suite.

L'appel jQuery est appelé à partir d'un événement de modification de liste déroulante

$("#Dropdownlist").on("change", function () {
        $.ajax({
                type: "POST",
                url: "@Url.Action("Action", "Controller")",
                //contentType: "application/json; charset=utf-8",
                dataType: "json",
                success: function (data) {
                    $.each(data, function (key, item) {
                        $("tbody").append("<tr><td>appending data here</td></tr>");
                    });

                    $('#table').dataTable().fnDestroy();
                    $('#table').dataTable({
                        "aoColumns": [
                          { "bSortable": false },
                          null, null, null, null, null
                        ]
                    });
                }
            })
    });

Ce jQuery a été modifié pour le raccourcir. Ce jQuery fonctionne très bien, il obtient les données et les ajoute dans les nouvelles lignes du tableau tout en mettant à jour le plugin datatable pour le faire fonctionner avec les nouvelles données.

Le problème est que les anciennes données restent, j'ai essayé de les nettoyer avec diverses choses comme

$("#tbodyID tr").detach();
$("#tbodyID tr").remove();
$("#tbodyID").empty();
$("#tbodyID").html("");
$("tbody").empty();
$("tbody").html("");
$('#table').dataTable().fnDraw(false)

Je les mets avant l'appel AJAX. Mais rien ne fonctionne, les anciennes données restent toujours et chaque fois que j'appelle l'appel AJAX, il continue de le remplir avec de nouvelles données tandis que l'ancien reste encore.

Existe-t-il un moyen d'effacer le tbody avec jQuery ou une fonction de tables de données intégrée?

jquerydatatablesjquery-datatables
17
HenrikP

Réponse mise à jour afin de cibler l'API dataTables 1.10.x. La réponse originale ci-dessous utilisant fnMethods visait 1.9.x mais est toujours applicable pour toute 1.9.x - 1.10.x dataTable().

Lorsqu'un dataTable est instancié avec DataTable() qui renvoie une instance d'API:

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

Comme réponse originale, un exemple de vidage complet de <tbody> Et d'insertion d'une nouvelle ligne:

$("#delete").click(function() {
    dataTable.clear();
    dataTable.row.add([
        'new engine',
        'new browser',
        'new platform',
        'new version',
        'new css'
    ]).draw();
});

Remarquez draw(). Lorsqu'une table est manipulée via l'API, il est nécessaire d'appeler draw() pour mettre à jour l'affichage afin de refléter ces changements.

démo -> http://jsfiddle.net/9kLmb9fu/

Tu devrais utiliser

$('#table').dataTable().fnClearTable();

Voici un exemple extrait de jsfiddle ci-dessous, supprimant tout le contenu de <tbody> (Sur une table paginée!) Et insérant une nouvelle ligne:

$("#delete").click(function() {
    dataTable.fnClearTable();
    dataTable.fnAddData([
        'new engine',
        'new browser',
        'new platform',
        'new version',
        'new css'
    ]);
});

voir violon -> http://jsfiddle.net/yt57V/

38
davidkonrad

Vous pouvez utiliser la fonction clear() pour supprimer toutes les lignes de données du tableau comme suit:

var table = $('#example').DataTable();
table.clear().draw();
11
T J

vous pouvez utiliser la fonction DataTables fnClearTable et fnAddData comme ceci

$("#Dropdownlist").on("change", function () {
    $.ajax({
            type: "POST",
            url: "@Url.Action("Action", "Controller")",
            //contentType: "application/json; charset=utf-8",
            dataType: "json",
            success: function (data) {
                var oTable = $('#table').dataTable();//get the DataTable
                oTable.fnClearTable();//clear the DataTable
                $.each(data, function (key, item) {
                    oTable.fnAddData(["appending ","data","here"]);//add new row
                    //each element in the array is a td
                });
                /*no need to destroy and create new DataTable
                $('#table').dataTable().fnDestroy();
                $('#table').dataTable({
                    "aoColumns": [
                      { "bSortable": false },
                      null, null, null, null, null
                    ]
                });
                */
            }
        })
});
6
Abraham Uribe

Je pense que ce que vous cherchez est ce morceau de code:

var oSettings = $('#table').dataTable().fnSettings();
var iTotalRecords = oSettings.fnRecordsTotal();
for (i=0;i<=iTotalRecords;i++) {
   $('#table').dataTable().fnDeleteRow(0,null,true);
}

Source: http://www.datatables.net/forums/discussion/comment/15862

3
G.Mendes