CODEWITHSUNDEEP
javascriptjquerydatatables
JianYA
JianYA

Reputation: 3024

Initialise empty JQuery Datatables and add items to it

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.

Upvotes: 2

Views: 4408

Answers (1)

Ahmed Sunny
Ahmed Sunny

Reputation: 2243

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();
});

Upvotes: 2

Related Questions