How to destroy a datatable? How to destroy a datatable? jquery jquery

How to destroy a datatable?


To completely delete and remove the datatable object with its DOM elements you need to :

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


Just add this parameter to your declaration:

"bDestroy" : true,

Then whenever you want to "recreate" the table it won't drop an error

P.S. You can create a function to get the required parameters and then reinitialize the table with different options at runtime.

For example I use this one in my programs, if it helps you can adapt it to your needs

 initDataTable($('#tbl1'), 2, 'asc', false, false, 25, false, false, false, 'landscape', rptHdr);  /* Initialize Table */
/*---------------------- Datatable initialization  --------------------------- *//* * @$table           Table id which be initialized * @sortCol          Column number that will be initially sortered  * @sorOrder         Ascendant (asc) or Descendant (desc) * @enFilter         Boolean value to enable or not the filter option * @enPaginate       Boolean value to enable or not the filter option * @dplyLength       Number of records contained per page when pagination is enabled * @enInfo           Boolean value to show or not the records info * @autoWidth        Boolean value to enable or not table autowidth * @enTblTools       Boolean value to enable or not the table tools addin * @pdfOrientation   Page orientation (landscape, portrait) for pdf documents (required enTblTools == enabled) * @fileName         Output file naming (required enTblTools == enabled)  /*------------------------------------------------------------------------------*/  function initDataTable($table, sortCol, sortOrder, enFilter, enPaginate, dplyLength, enInfo, autoWidth, enTblTools, pdfOrientation, fileName) {        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": {            "aButtons": [{                    "sExtends": "copy",                    "sButtonText": "Copy",                    "bHeader": true,                    "bFooter": true,                    "fnComplete": function(nButton, oConfig, oFlash, sFlash) {                        $().shownotify('showNotify', {                            text: 'Table copied to clipboard (no formatting)',                            sticky: false,                            position: 'middle-center',                            type: 'success',                            closeText: ''                        });                    }                }, {                    "sExtends": "csv",                    "sButtonText": "Excel (CSV)",                    "sToolTip": "Save as CSV file (no formatting)",                    "bHeader": true,                    "bFooter": true,                    "sTitle": fileName,                    "sFileName": fileName + ".csv",                    "fnComplete": function(nButton, oConfig, oFlash, sFlash) {                        $().shownotify('showNotify', {                            text: 'CSV file saved in selected location.',                            sticky: false,                            position: 'middle-center',                            type: 'success',                            closeText: ''                        });                    }                }, {                    "sExtends": "pdf",                    "sPdfOrientation": pdfOrientation,                    "bFooter": true,                    "sTitle": fileName,                    "sFileName": fileName + ".pdf",                    "fnComplete": function(nButton, oConfig, oFlash, sFlash) {                        $().shownotify('showNotify', {                            text: 'PDF file saved in selected location.',                            sticky: false,                            position: 'middle-center',                            type: 'success',                            closeText: ''                        });                    }                },                {                   "sExtends": "Other",                   "bShowAll": true,                   "sMessage": fileName,                   "sInfo": "Please press escape when done"                }            ]        }        /*"fnDrawCallback": function( oSettings ) {alert( 'DataTables has redrawn the table' );}*/    });    /* If is IE then avoid setting the sticky headers */    if (!navigator.userAgent.match(/msie/i) && enPaginate == false) {        new $.fn.dataTable.FixedHeader(oTable);    }    return oTable}

Ivan.


I know this is an old question, but since I bumped into a similar issue and resolved it.

The following should do the trick (the comments are coming from the 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();