How to destroy a datatable?

Question

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%"}                                       ]                     }); } 

Answer 1

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