CODEWITHSUNDEEP
javascriptjquerydatatables
dilanka
dilanka

Reputation: 13

JSON Data not appering in Datatable. When Clicking any function it says no data avaliable

I m using AdminBSB Material design Admin panel for a project. Im getting JSON data from an API and displaying it on a DataTable . The Data showing in the table but when i click any function sorting/searching all the data disappear from the table and showing 0 data

dataType: 'json', type: "GET", success: function (data) {

    $('#loading-data3').hide();

    var i = 0;
    var count = data.total;
    console.log(count);
    for (i = 0; i <= count; i++) {
        $('#remaining-time').find('tbody').append(
            "<tr><td>" + data.data[i].ASSIGNEE + "</td><td>" +
            data.data[i].totalEstimateTime + "</td><td>" +
            data.data[i].timeSpent + "</td><td>" +
            data.data[i].remainTime + "</td></tr>"
        );
    }

}

});

sample screenshot

Upvotes: 1

Views: 73

Answers (1)

Louys Patrice Bessette
Louys Patrice Bessette

Reputation: 33943

You are using DataTables... This plugin create some new elements dynamically on every draw (caused by ordering, searches, pagination, etc). If you want to add a new row to a Datatable already instantiated, you have to use the row.add() method.

You should have the DataTable instantiation somewhere in your code, possibly with an option object passed as argument. If you do not yet, assign a variable to the instance.

var myTable = $('#remaining-time').DataTable();

Then when you loop through your json data to add rows, it should look like this:

// Your loop through json
var count = data.total;
console.log(count);
for (i = 0; i <= count; i++) {
  myTable.row.add([             // "myTable" refers to the Datable instance here.
    data.data[i].ASSIGNEE,
    data.data[i].totalEstimateTime,
    data.data[i].timeSpent,
    data.data[i].remainTime,
  ]);
}

Documentation

Upvotes: 1

Related Questions