Can not fully destroy datatables

islamelshobokshy

I destroy and recreate my table dynamically using ajax without reloading the page. My problem is, when the table gets destroyed and recreated, it keeps the same amount of the columns from the last call + the current ones.
For example, on my first initialization, Datatbles has 2 columns, the next time when I give it 2 columns, it doesn't just show the 2, it shows 4. The first 2 having the data of the latest call, and the second 2 have these same data (not the data from the previous one). What am I doing wrong? Why are the columns keep adding and not recreated from the beginning?

My form :

<form method="GET" action="" class="form-horizontal" id="form" onsubmit="return false;">

    <button type="submit" onclick="submitForm();">Update table</button>

</form>

My table :

<table class="table table-striped display nowrap col-md-12" id="achats_table">
    <thead></thead>

    <tbody></tbody>

    <tfoot align="right">
        <tr></tr>
    </tfoot>
</table>

My ajax call :

function submitForm() {

        if ($.fn.DataTable.isDataTable("#table")) {
            $('#table').DataTable().clear();
            $('#table').DataTable().destroy();
            $('#table').empty();
        }

        url = $("#form").serialize();
        console.log(url);
        $(document).ready(function() {
            $.ajax({
                type: "GET",
                dataType: "json",
                url: '/api/test?'+url,
                'beforeSend': function (request) {
                    data = {}; // like this maybe?
                },
                success: function (data) {
                    //Getting data variable containing
                    data = data.data;
                    for(..) {
                        $('table tfoot tr').append('<th></th>');
                    }
                    var oTable = $('#achats_table').DataTable( {
                        destroy: true,
                        data: data,
                        columnDefs: columnDefs,
                        columns: columns,
                        ... etc
                    }
                }
        });
}

The result is something like this, on the first initialization (the first time I click on the button) :

Header A | Header B
Data A     | Data B
Fotter A   | Footer B

The second time :

Header C | Header D | Header C | Header D
Data C     | Data D     | Data C      | Data D
Fotter C   | Footer D   | Data C     | Data D

etc ...

kthorngren

The only thing I see is that selector used with the API's is #table and for initializing Datatables you are using #achats_table. Maybe that's expected.

You haven't posted enough information for us to help. I'm guessing you are receiving the column definitions in your ajax response.

Can you post the actual code and response you are receiving for both the first and second requests? Or maybe you can capture debugger output for each request:
https://datatables.net/manual/tech-notes/10#DataTables-debugger

Posting partial code and generic data responses does not provide the information needed to help you.

Kevin

islamelshobokshy

No the id isn't the problem, I mis-wrote it here.

I'm using the debugger, response first request : https://debug.datatables.net/uyotaz
Second request : https://debug.datatables.net/inagad

Knowing that, the first and second request should've contained exactly the same values/number of columns/number of rows and everything, as the input for both is the same. But each request, the number of rows is equal to current + the last number of rows >.<

islamelshobokshy

I figured it out, it was a problem with my code indeed, ignore this post XD Thanks ALOT. You guys are awesome!