Initialise empty JQuery Datatables and add items to it

Question

I am trying to initialise an empty datatable and add items to it. My datatable is populated from an array. However, when I add items to the array and refresh the datatable, I get this error:

Uncaught TypeError: Cannot set property 'data' of null
    at _fnBuildAjax (jquery.dataTables.js:3962)
    at __reload (jquery.dataTables.js:7582)
    at _Api.<anonymous> (jquery.dataTables.js:7640)
    at _Api.iterator (jquery.dataTables.js:7029)
    at _Api.<anonymous> (jquery.dataTables.js:7639)
    at Object.reload (jquery.dataTables.js:7197)
    at HTMLDocument.<anonymous> (Create:77)
    at HTMLDocument.dispatch (jquery-3.3.1.js:5183)
    at HTMLDocument.elemData.handle (jquery-3.3.1.js:4991)
    at Object.trigger (jquery-3.3.1.js:8249)

This is my datatables code:

    var data = ["Test"]
    var data2 = ["Test2"]
    var dataSet = [];
    dataSet.push(data);
    dataSet.push(data2);
    var rowItem = "";
    $(document).ready(function () {
        var table = $("#table").DataTable({
            "data": dataSet,
            "filter":false,
            "language": {
                "search": "",
                "searchPlaceholder": " Search"
            },
            "select": {
                "style": 'multi'
            },
            "ordering": true,
            "lengthChange": false,
            "columns": [
               { "title": "Name"},
            ],
            "responsive": true,
            "processing":true,
        }).columns.adjust()
        .responsive.recalc();
        new $.fn.dataTable.FixedHeader(table);

This is how I add items to the array and reload the table:

    $(document).on($.modal.AFTER_CLOSE, function (event, modal) {
        console.log(dataSet);
        dataSet.push([rowItem]);
        table.ajax.reload();
        $("#modal").empty();
    });

Why does it say my dataSet is null? When I show it on the console, its contains the first 2 preloaded items and the next few I have added to it.

ajax for datatable, you can define ajax in datatable, so initially you can load nothing, and later can call ajax.reload() function anywhere and anytime, will reload table with new data — Ahmed Sunny
– Ahmed Sunny, Commented Aug 31, 2018 at 7:58
but you have to init ajax in datatable, , ajax.reload is a way to recall ajax, not initializing it — Ahmed Sunny
– Ahmed Sunny, Commented Aug 31, 2018 at 8:03

Ahmed Sunny · Accepted Answer · 2018-08-31 08:12:00Z

2

ajax is for server side requests, and for javascript array or local array based datatanles you need to use

table.draw()

and when you have ajax , you need to init

serverside:true and then use ajax.reload();

$(document).on($.modal.AFTER_CLOSE, function (event, modal) {
    console.log(dataSet);
      table.clear();
      table.rows.add(dataSet);
      table.draw();
      $("#modal").empty();
});

answered Aug 31, 2018 at 8:12

Ahmed Sunny

2,2431 gold badge24 silver badges31 bronze badges

Sign up to request clarification or add additional context in comments.

5 Comments

JianYA Over a year ago

Thanks for your answer.

JianYA Over a year ago

If you see my items, for some reason the table only works if I keep them within square brackets like this [var]. Is there a reason for that?

Ahmed Sunny Over a year ago

because its the format for data array that datatable reads, array of arrays ,

JianYA Over a year ago

I see. Thank you

Ahmed Sunny Over a year ago

each array is one row and then all together in one array, here

Collectives™ on Stack Overflow

Initialise empty JQuery Datatables and add items to it

1 Answer 1

5 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

5 Comments

Your Answer

Sign up or log in

Post as a guest

Related