datatables Cannot reinitialise DataTable and destroy is not working

Question

I have tried all the commands for destroy and empty of the datatable after selecting a new option, and is not working.

this is some part of my js file that contains the ajax. it uses dynamic urls apis.

    function table(url, columns) {
    
        var dt = $("#datatables").dataTable({
            "serverSide": true,
            "processing": true,
            "ajax": {
                "url": url,
                "type": "GET",
            },
            "columns": columns,
            lengthMenu: [[25, 100, 250, 500], [25, 100, 250, 500]],
            pageLength: 25,
            // destroy: true
        });
    ... // more stuff here about the design of the table
    }

    $("form#btnGetDomain").on("submit", function (ev) {
        ev.preventDefault();
        ev.stopPropagation();

        // $("#datatables").dataTable().fnDestroy();

        var url;
        var columns;
    
        var categ = document.getElementById("categ").value;

    // this is where i do if statements depending what options was selected
// i get the proper url api
    ... 
    
        table(url, columns);
    });

i have tried all those commands:

$("#datatables").dataTable().fnDestroy();

$("#datatables").empty();


destroy: true,

The command "destroy: true" inside the dataTable i don't know if it works properly because after i try to select the second time another option, the table doesn't responde, it just says ** Processing....**

I also tried to put the comand inside the on submit function before i select any option to clear the table. Now i m thinking of doing an if statement, if their is a table, clear it.

Thank you

UPDATE

i ve tried with dataTable and DataTable

**UPDATE 2 **

if ($.fn.DataTable.isDataTable("#datatables")) {
        $("#datatables").DataTable().clear().draw();
        $("#datatables").dataTable().fnDestroy();
    }

This command i have put before the var dt = $("#datatables").dataTable({...

Yes i noticed i used small and big cap datatable...but this worked ...i did try to put both with big D but didn't work... also tryed to use in the last one: DataTable().destroy();...didn't work

Example: using videos and channels I have selected the first time videos.

After i select channels: It changes the columns names no problem ( i have different columns names for every api)... but the rows remain the same.

When i select back to videos. Column names change, and rows are changing to previous selection which was channels.

Hope you can understand. It doesn't really make sense why i have to use dataTable and DataTable...

it does change, but wrong changes...at least i am getting closer to the answer, hopefully.

Omega Omega · Accepted Answer · 2018-05-03T13:03:42

I found out the answer i put this lines of code at the beginning of the table function

function table(url, columns) {
    var dt;

    if ($.fn.DataTable.isDataTable("#datatables")) {
        $("#datatables").DataTable().clear().draw();
        $("#datatables").DataTable().destroy();
        $("#datatables thead").html('');
    }

...
}

It works for me fine, it clears the rows, destroys the table, and empty the thead.

Oh..and i have change from lower case dataTable too upper case DataTable

datatables Cannot reinitialise DataTable and destroy is not working

2 Answers