Process Ajax Data Before Displaying on Table!

[grabcityinfo]

I'm consuming data from a web service/API. When the response is arrived, I have to iterate over the list, fetch some data of interest, build new array of data then show the array on the datatable. How can I achieve this using ajax option?

[Holt59]

You cannot do this with the AJAX option directly but you can do it manually by first creating an empty table (just pass an empty array as the data attribute) and then use the addRow / addRows method on the datatable (or the 'insert' method if you are using jQuery). Something like:

var dt = new DataTable(myTableId, {
    data: [],
    // Other options... 
});

function fetchData() {
    var originalData = /* ... */;
    
    // Returns an array of data:
    var processedData = processData(originalData);
    
    // Add the new entries to the table:
    dt.addRows(processData);
    // $(myTableId).datatable('insert', processedData);
}

[grabcityinfo]

Hi!

Here is my code

function Init(){
	dt = new DataTable(document.getElementById('orders'), {
                    data: [],
                    prevPage: false,
                    nextPage: false,
                    onChange: function (old, current) {
                        //alert(old + "," + current);
                        if (current > old) {
                            //GetOrders(current, limit, accessToken);
                        }
                    },
                    lineFormat: function (id, data) {
                        var res = $('<tr></tr>');
                        for (var key in data) {
                            res.append('<td>' + data[key] + '</td>');
                        }
                        return res;
                    },
}

But, I got the following error, it seems like something is wrong with "lineFormat". When I remove lineFormat, it works very well. What can I do?

Uncaught TypeError: Failed to execute 'appendChild' on 'Node': parameter 1 is not of type 'Node'.
    at DataTable.refresh (datatable.min.js:1)
    at DataTable.filter (datatable.min.js:1)
    at DataTable.sort (datatable.min.js:1)
    at DataTable.addRows (datatable.min.js:1)
    at UpdateUI (Index:204)
    at Object.<anonymous> (Index:153)
    at fire (jquery-1.10.2.js:3062)
    at Object.fireWith [as resolveWith] (jquery-1.10.2.js:3174)
    at done (jquery-1.10.2.js:8249)
    at XMLHttpRequest.callback (jquery-1.10.2.js:8792)

[Holt59]

The problem is that you are mixing jQuery with the native datatable constructor. Your lineFormat returns a jQuery-like DOM element, but since you are not constructing the datatable with jQuery, you need to return a vanilla <tr> element:

lineFormat: function (id, data) {
    var res = document.createElement('tr');
    for (var key in data) {
        res.innerHTML += '<td>' + data[key] + '</td>';
    }
    return res;
}

Or you need to construct the datatable with jQuery:

$('#orders').datatable({

});

$('#orders').datatable('insert', [...]);