web-dev-qa-db-fra.com

Comment détruire un datatable?

J'utilise datatables et bootstrap-daterangepicker pour sélectionner une plage pour laquelle des données seront affichées dans Datatables.

Cela fonctionne bien.

Le problème est que lorsque je sélectionne une nouvelle gamme dans daterangepicker, cela me fournit une fonction de rappel dans laquelle je peux effectuer mes tâches . Dans cette fonction de rappel, j'appelle à nouveau Datatables. Mais puisque la table est déjà créée, comment puis-je détruire la table précédente et en afficher une nouvelle à sa place?

Aide aimablement. Je suis coincé. :(

EDIT: J'ai le code suivant:

$(element).daterangepicker({options},
function (startDate, endDate) { //This is the callback function that will get called each time
$('#feedback-datatable').dataTable({
                        "sDom": "<'row-fluid'<'span6'l><'span6'f>r>t<'row-fluid'<'span6'i><'span6'p>>",
                        "sPaginationType": "bootstrap",
                        "oLanguage": {
                            "sLengthMenu": "_MENU_ records per page",
                            "oPaginate": {
                                "sPrevious": "Prev",
                                "sNext": "Next"
                            }
                        },
                        "aoColumnDefs": [{
                            'bSortable': false,
                            'aTargets': [2,4]
                        }],
                        "bAutoWidth": false,
                        "aoColumns": [
                                      {"sWidth": "20%"},
                                      {"sWidth": "15%"},
                                      {"sWidth": "45%"},
                                      {"sWidth": "15%"},
                                      {"sWidth": "5%"}
                                      ]
                    });
}
javascriptjquerydatatables
22
LittleLebowski

Pour supprimer et supprimer complètement l'objet datatable avec ses éléments DOM, vous devez:

//Delete the datable object first
if(oTable != null)oTable.fnDestroy();
//Remove all the DOM elements
$('#feedback-datatable').empty();
29
sdespont

Ajoutez simplement ce paramètre à votre déclaration:

"bDestroy": true,

Ensuite, chaque fois que vous souhaitez "recréer" la table, une erreur ne sera pas supprimée.

P.S. Vous pouvez créer une fonction pour obtenir les paramètres requis, puis réinitialiser la table avec différentes options lors de l'exécution.

 initDataTable ($ ('# tbl1'), 2, 'asc', faux, faux, 25, faux, faux, faux, 'paysage', rptHdr);/* Initialize Table * /

 
/* ---------------------- Initialisation datatable --------------------- ------ */
/* 
 * @ $ table Identifiant de la table à initialiser 
 * @sortCol Numéro de colonne qui sera initialement trié 
 * @sorOrder Ascendant (asc) ou descendant (desc) 
 * @enFilter Valeur booléenne pour activer ou non l'option de filtrage 
 * @enPaginate Valeur booléenne pour activer ou non l'option de filtrage 
 * @dplyLength Nombre d'enregistrements contenus par page lorsque la pagination est activée 
 * @enInfo Valeur booléenne permettant d'afficher ou non les informations sur les enregistrements 
 * @autoWidth Valeur booléenne pour activer ou non la largeur automatique de la table 
 * @enTblTools Valeur booléenne pour activer ou non le complément d'outils de table 
 * @pdfOrientation Orientation de la page (paysage, portrait) pour les documents pdf (requis enTblTools == activé) 
 * @fileName Nom du fichier de sortie (obligatoire enTblTools == activé) 

/* ---------------------------------------------------- ------------------------------ */
 function initDataTable ($ table, sortCol, sortOrder, enFilter, enPaginate, dplyLength , enInfo, autoWidth, enTblTools, pdfOrientation, nomFichier) {

 var dom = (enTblTools)? 'T': ''; .________. var oTable = $ table.dataTable ({
 "order": [
 [sortCol, sortOrder] 
]., 
 "bDestroy": true, 
 "bProcessing": true, 
 "dom": dom, 
 "bFilter": enFilter, 
 "bSort": true, 
 "bSortClasses": true, 
 "bPaginate": enPaginate, 
 "sPaginationType": "full_numbers", 
 "iDisplayLength": dplyLength, 
 "bInfo": enInfo, 
 "bAutoWidth": autoWidth, 
 "tableTools": {
 "aBoutons": [{
 "sExtends": "copie", 
 "sButtonText": "Copier", 
 "bHeader": vrai, 
 "bFooter": vrai, 
 "fnComplete": fonction (nButton, oConfig , oFlash, sFlash) {
 $ (). shownotify ('showNotify', {
 text: 'Tableau copié dans le presse-papiers (sans mise en forme)', 
 sticky: false, 
 position: 'centre-centre', 
 type: 'succès', 
 closeText: '' 
 }); 
 } 
 }, {
 "sExtends": "csv", 
 "sButtonText": "Excel (CSV)", 
 "sToolTip": "Enregistrer en tant que fichier CSV (sans mise en forme)", 
 "bHeader": vrai, 
 "bFooter": vrai, 
 "sTitle": nom_fichier, 
 "sFileName": NomFichier + ".csv", 
 "fnComplete": fonction (nButton, oConfig, oFlash, sFlash) {
 $ (). shownotify ('showNotify', {
 text: 'Fichier CSV enregistré à l'emplacement sélectionné.', 
 sticky: false, 
 position: 'middle-center', 
 type: ' succès ', 
 closeText:' '
}); 
 } 
 }, {
 "sExtends": "pdf", 
 "sPdfOrientation": pdfOrientation, 
 "bFooter": vrai, 
 "sTitle": nom_fichier, 
 "sFileName": NomFichier + ".pdf", 
 "fnComplete": fonction (nButton, oConfig, oFlash, sFlash) {
 $ (). shownotify ('showNotify', {
 text: 'Fichier PDF enregistré à l'emplacement sélectionné.', 
 sticky: false, 
 position: 'middle-center', 
 type: ' succès ', 
 closeText:' '
}); 
 } 
 }, 
 {
 "sExtends": "Autre", 
 "bShowAll": true, 
 "sMessage": nom_fichier, 
 "sInfo": "S'il vous plaît appuyez sur échapper lorsque vous avez terminé" 
 } 
 ] 
 } 
/* "fnDrawCallback": function (oSettings) {alert ('DataTables a redessiné la table');} */
 }); 
/* Si est IE, évitez de définir les en-têtes collants */
 if (! navigator.userAgent.match (/ msie/i) && enPaginate == false) {
 new $ .fn.dataTable.FixedHeader (oTable); 
 } 

 renvoyer oTable 
} 

Ivan

Ivan.

13
Ivan RS

Pour DataTables 1.10, les appels sont les suivants:

// Destroy dataTable
$('#feedback-datatable').DataTable.destroy();

// Remove DOM elements
$('#feedback-datatable').empty();
7
nurider

Je sais que c'est une vieille question, mais depuis que je suis tombé sur un problème similaire et que je l'ai résolu. 

Ce qui suit devrait faire l'affaire (les commentaires proviennent du DataTable API doc ). 

// Quickly and simply clear a table
$('#feedback-datatable').dataTable().fnClearTable();

// Restore the table to it's original state in the DOM by removing all of DataTables enhancements, alterations to the DOM structure of the table and event listeners
$('#feedback-datatable').dataTable().fnDestroy();
7
pete

Pour les chercheurs Google

Très difficilement, j'ai réussi à détruire la Datatable, Vider toutes les données précédentes avant de charger de nouvelles données et de réinitialiser Datatable en procédant ainsi.

if ($.fn.DataTable.isDataTable("#myTbl")) {
      ("#myTbl").DataTable().destroy();
}
$('#myTbl tbody > tr').remove();

...

// Load table with new data and re-initialize Datatable
2
Shree Krishna
$('#feedback-datatable').dataTable().fnDestroy();

cela devrait détruire dataTable, vous devrez alors réinitialiser dataTable.

1
Alfred D'Souza

Sur DataTables 1.10 et supérieur, vous pouvez utiliser "destroy": true 

Lire plus de détails ici

1
Stanley Nguma

De DataTable

var table = $('#myTable').DataTable();
$('#tableDestroy').on( 'click', function () {
table.destroy();
});

Rechargez une description complète de la table à partir du serveur, y compris les colonnes:

var table = $('#myTable').DataTable();
$('#submit').on( 'click', function () {
    $.getJSON( 'newTable', null, function ( json ) {
        table.destroy();
        $('#myTable').empty(); // empty in case the columns change

        table = $('#myTable').DataTable( {
            columns: json.columns,
            data:    json.rows
        } );
    } );
});

J'espère que ça va aider

0
Ali Adnan