Loading data to datatable using AJAX on click

alwinaugustin

I am using datatables to load data to table on clicking on elements in D3 charts. I have the following code for initializing the table :

    $(document).ready(function () {
        Table = $('#data-table').DataTable({
            data: [],
            "columns": [
                { "data": "error_code" },
                { "data": "message" }
            ]
        });
    });

    Now I have another click function as follows :

            $.ajax({
                method: "POST",
                data: { code: node.data.name },
                url: "get_table_data"
            }).done(function (data) {
                console.log(data);
                Table.clear().draw();
                Table.rows.add(data);
            }).fail(function (jqXHR, textStatus, errorThrown) {
                console.log(errorThrown);
            });

I am getting data from server and it is logged to console in the correct format. But the data is not loaded to the table. It is showing No data available in table.

PS: Table initialization and the code to load data using ajax are in two javascript files.

kthorngren

Move the .draw() from the clear() to rows.add(), for example:

            Table.clear();
            Table.rows.add(data).draw();

Kevin