I'm using datatables and using bootstrap-daterangepicker to select a range for which data will be shown in Datatables.
It is working fine.
The problem is when I select a new range in daterangepicker, it provides me with a callback function where I can do my stuff.
In that callback function, I'm calling Datatables again. But since the table is already being created, how can I destroy the previous table and show a new one in it's place?
Kindly help. I'm stuck. :(
EDIT:
I've the following 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%"}
]
});
}
To completely delete and remove the datatable object with its DOM elements you need to :
//Delete the datable object first
if(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();
For DataTables 1.10, the calls are:
// Destroy dataTable
$('#feedback-datatable').DataTable.destroy();
// Remove DOM elements
$('#feedback-datatable').empty();
For the google searchers
Very hardly I managed to destroy the Datatable, Empty it's all previous data before loading new data and re-initializing Datatable by doing like this,
if ($.fn.DataTable.isDataTable("#myTbl")) {
("#myTbl").DataTable().destroy();
}
$('#myTbl tbody > tr').remove();
...
// Load table with new data and re-initialize Datatable
On DataTables 1.10 and above you can use "destroy": true
Read more details here
From DataTable
var table = $('#myTable').DataTable();
$('#tableDestroy').on( 'click', function () {
table.destroy();
});
Reload a full table description from the server, including columns:
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
} );
} );
});
Hope it will help
$('#feedback-datatable').dataTable().fnDestroy();
this should destroy dataTable, then you will have to reinitialize dataTable.
