Datatable destroy not working properly

Question

After using table.destroy() method my table rows are still displayed, only the search box and other borders of datatable are not displayed.

I want to delete all the rows in the datatable, basically i want to delete the whole datatable so that i can reinitialize it.

Thank you

Answer 1

When you use the destroy() method you are effectively returning the table back to its original state. The HTML for the table is still present on the page hence why you can still see the table rows, without the added DataTables functionality.

If you want to remove the data rows from your DataTable, you may want to look at the clear() method, for example:

table.clear();

I have set up a jsfiddle which demonstrates these options.

If you can provide your code I should be able to give you a more accurate answer.

Answer 2

In case someone else finds this thread, I had the same issue when trying to replace a datatable with an ajax call. Calling destroy and then reinitializing the datatable after the ajax response worked for me with no errors. documentation

$('#myTrigger').click(function(e){        
    e.preventDefault();  

    table.destroy();

    $.ajax({
        type: 'post',
        url: 'processor.php',
        data: $('#myform').serialize(),
        success: function (response) {                        
            var table = $('#myTable').DataTable({
                "pageLength": 25
            });
        }
    }); 
});