Jquery datatable add rows

Question

I have a datatable in my page initiated like below:

var dataSet = [
    { "id": 1, "name": "Bennett Weimann", "email": "jtremblay@example.com" },
    { "id": 2, "name": "Bennett Weimann", "email": "buckridge.orin@example.com" }
];

$(document).ready(function () {
    $('#example').DataTable({
        data: dataSet,
        columns: [
            { data: 'id', title: 'Id' },
            { data: 'name', title: 'Name' },
            { data: 'email', title: 'Email' },
        ],
    });
});

Additinally I have a button which makes an ajax post reques, in the answer I get a json

[{"id":1,"name":"Bennett Weimann","email":"jtremblay@example.com"},
{"id":2,"name":"Bennett Weimann","email":"buckridge.orin@example.com"}]

If I try to add the response like below, I get an error

request.done(function (response, textStatus, jqXHR) {

        table = $('#example').DataTable();
        table.clear();
        table.rows.add(response);
        table.draw();

    });

Error is "DataTables warning: table id=example - Requested unknown parameter 'id' for row 0, column 0. For more information about this error, please see http://datatables.net/tn/4"

However if I copy and paste the response manually, it has no issue whatsoever.

request.done(function (response, textStatus, jqXHR) {

table = $('#example').DataTable();
table.clear();
table.rows.add([
    {"id":1,"name":"Bennett Weimann","email":"jtremblay@example.com"},
    {"id":2,"name":"Bennett Weimann","email":"buckridge.orin@example.com"}
]);
table.draw();

});

Any help appriciated what could cause such error.

I don't know how you are executing your `request` (can you show us?) - but are you sure the JSON response is an unnamed array `[ { ... }, { ... } ]` and not an object `{ "foo": [ { ... }, { ... } ] }`? Just wanted to check. — andrewJames, Jun 25 '22 at 01:22

score 1 · Answer 1 · answered Jun 25 '22 at 08:12

I must have been tired.. after a sleep I could see that I was passing an object instead of an array. I am using php as a backend, if I create an array like

    $data = array([
        "id"  => 1,
        "name" => "foo",
        "email" => "bar"
    ]);

    return $data;

and passing the response it works like charm

 request.done(function(response, textStatus, jqXHR) {

        table = $('#example').DataTable();
        table.clear();
        table.rows.add(response);
        table.draw();

    });

Jquery datatable add rows

1 Answers1