webentwicklung-frage-antwort-db.com.de

Wie kann ich eine Datentabelle zerstören?

Ich verwende datatables und benutze bootstrap-daterangepicker , um einen Bereich auszuwählen, für den Daten in Datatables angezeigt werden.

Es funktioniert gut.

Das Problem ist, wenn ich in daterangepicker einen neuen Bereich auswähle, gibt es eine Rückruffunktion, mit der ich meine Sachen erledigen kann ... In dieser Rückruffunktion rufe ich wieder Datatables auf. Aber da die Tabelle bereits erstellt wird, wie kann ich die vorherige Tabelle zerstören und an ihrer Stelle eine neue Tabelle anzeigen?

Freundlich helfen. Ich stecke fest. :(

EDIT: Ich habe den folgenden Code:

$(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%"}
                                      ]
                    });
}
22
LittleLebowski

Um das datierbare Objekt mit seinen DOM-Elementen vollständig zu löschen und zu entfernen, müssen Sie Folgendes tun:

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

Fügen Sie diesen Parameter einfach zu Ihrer Deklaration hinzu:

"bDestroy": wahr,

Wann immer Sie die Tabelle "neu erstellen" möchten, wird kein Fehler gelöscht

P.S. Sie können eine Funktion erstellen, um die erforderlichen Parameter abzurufen, und die Tabelle zur Laufzeit mit verschiedenen Optionen neu initialisieren.

 initDataTable ($ ('# tbl1'), 2, 'asc', false, false, 25, false, false, false, 'landscape', rptHdr);/* Tabelle initialisieren * /

 
/* ---------------------- Datierbare Initialisierung --------------------- ------ */
/* 
 * @ $ table Tabellen-ID, die initialisiert werden soll 
 * @sortCol Spaltennummer, die anfänglich sortiert wird 
 * @sorOrder Ascendant (asc) oder Descendant (desc) 
 * @enFilter Boolescher Wert, um die Filteroption .__ zu aktivieren oder nicht. * @enPaginate Boolescher Wert, um die Filteroption zu aktivieren oder nicht 
 * @dplyLength Anzahl der Datensätze pro Seite, wenn die Paginierung aktiviert ist 
 * @enInfo Boolescher Wert, um die Datensatzinformationen anzuzeigen
 * @autoWidth Boolescher Wert, um die automatische Tabellenbreite .__ zu aktivieren oder nicht. * @enTblTools Boolescher Wert, um das Addin der Tabellenwerkzeuge .__ zu aktivieren oder nicht. * @pdfOrientation Seitenausrichtung (Querformat, Hochformat) für PDF-Dokumente (erforderliche enTblTools == aktiviert) 
 * @ dateiname Benennung der Ausgabedatei (erforderliche enTblTools == aktiviert) 

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

 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": deInfo, 
 "bAutoWidth": autoWidth, 
 "tableTools": {
 "aButtons": [{
 "sExtends": "copy", 
 "sButtonText": "Copy", 
 "bHeader": true, 
 "bFooter": true, 
 "fnComplete": Funktion (nButton, oConfig , oFlash, sFlash) {
 $ (). shownotify ('showNotify', {
 text: 'Tabelle wurde in die Zwischenablage kopiert (keine Formatierung)', 
 sticky: false, 
 position: "Mitte-Mitte", 
 Typ: 'Erfolg', 
 closeText: '' 
 }); 
 } 
 }, {
 "sExtends": "csv", 
 "sButtonText": "Excel (CSV)", 
 "sToolTip": "Als CSV-Datei speichern (keine Formatierung)", 
 "bHeader": wahr, 
 "bFooter": wahr, 
 "sTitle": Dateiname, 
 "sFileName": Dateiname + ".csv", 
 "fnComplete": Funktion (nButton, oConfig, oFlash, sFlash) {
 $ (). shownotify ('showNotify', {
 text: 'CSV-Datei am ausgewählten Speicherort gespeichert.', 
 sticky: false, 
 Position: 'Mitte-Mitte', 
 type: ' Erfolg ', 
 closeText:' '
}); 
 } 
 }, {
 "sExtends": "pdf", 
 "sPdfOrientation": pdfOrientation, 
 "bFooter": wahr, 
 "sTitle": Dateiname, 
 "sFileName": Dateiname + ".pdf", 
 "fnComplete": Funktion (nButton, oConfig, oFlash, sFlash) {
 $ (). shownotify ('showNotify', {
 text: 'PDF-Datei am ausgewählten Speicherort gespeichert.', 
 sticky: false, 
 position: 'middle-center', 
 type: ' Erfolg ', 
 closeText:' '
}); 
 } 
 }, 
 {
 "sExtends": "Other", 
 "bShowAll": true, 
 "sMessage": Dateiname, 
 "sInfo": "Bitte drücken Sie die Esc-Taste, wenn Sie fertig sind. } 
 ] 
 } 
/* "fnDrawCallback": function (oSettings) {alert ('DataTables hat die Tabelle neu gezeichnet');} */
 }); 
/* Wenn IE ist, vermeiden Sie das Setzen der Sticky-Header */
 if (! navigator.userAgent.match (/ msie/i) &&Paginate == false) {
 new $ .fn.dataTable.FixedHeader (oTable); 
 } 

 return oTabelle 
} 
Ivan

Ivan.

13
Ivan RS

Für DataTables 1.10 lauten die Aufrufe:

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

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

Ich weiß, das ist eine alte Frage, aber da bin ich auf ein ähnliches Problem gestoßen und habe es gelöst. 

Folgendes sollte den Trick ausführen (die Kommentare stammen von 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

Für die Google-Suchenden

Sehr schwer habe ich es geschafft, die Datatable zu zerstören.

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

dies sollte dataTable zerstören, dann müssen Sie dataTable neu initialisieren.

1
Alfred D'Souza

Bei DataTables 1.10 und höher können Sie "destroy": true verwenden. 

Lesen Sie mehr Details hier

1
Stanley Nguma

Aus DataTable

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

Laden Sie eine vollständige Tabellenbeschreibung vom Server neu, einschließlich Spalten:

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

Ich hoffe es wird helfen

0
Ali Adnan