Datatables clear tbody

J’ai une table HTML que je remplis avec les données d’un appel AJAX jQuery. Cette table utilise le plugin jQuery – datatables pour la pagination, le sorting, etc.

L’appel jQuery est appelé à partir d’un événement de changement 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("appending data here"); }); $('#table').dataTable().fnDestroy(); $('#table').dataTable({ "aoColumns": [ { "bSortable": false }, null, null, null, null, null ] }); } }) });

Ce jQuery a été édité pour le raccourcir. JQuery fonctionne très bien, il récupère les données et les ajoute aux nouvelles lignes de la table tout en mettant à jour le plug-in datatable pour le faire fonctionner avec les nouvelles données.

Le problème est que les anciennes données demeurent, j’ai essayé de le 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 aucune ne fonctionne, les anciennes données restnt toujours et chaque fois que j’appelle un appel AJAX, il continue de le remplir avec de nouvelles données, tandis que les anciennes restnt.

Existe-t-il un moyen d’effacer le tbody avec jQuery ou une fonction de données incorporée?

Réponse mise à jour afin de cibler l’API dataTables 1.10.x. La réponse originale ci-dessous, qui utilisait fnMethods , ciblait 1.9.x mais rest applicable à tout 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

et insertion d’une nouvelle ligne:

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

Avis 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 modifications.

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

Tu devrais utiliser

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

Voici un exemple tiré du jsfiddle ci-dessous, qui supprime tout le contenu de

(sur une table paginée!) Et insère une nouvelle ligne:

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

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

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

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

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 ] }); */ } }) });

Je pense que ce que vous recherchez 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