Load dynamic data in Jquery Data Tables

Question

 var tablerows = '';
var dataSet = [];
if (response.hasOwnProperty('records') && response.metadata.record_count > 0) {
    _.each(response.records, function (record) {
        var sku_data = get_api_data(urls.sku.list + "/" + record.skuid, api.access_token);

        if (sku_data != undefined) {
            sku_data.done(function (sku) {

                dataSet.push(sku.records[0].name);


                console.log(dataSet);
            })



        }

    })


    $('#demo').html('<table cellpadding="0" cellspacing="0" border="0" class="display" id="example"></table>');

    $('#example').dataTable({
        "data": dataSet,
        "columns": [
            { "title": "Product" }
        ],
        "aoColumns": [
                null
        ]
    });

How do i dynamically add all the dataSet values to the Datatable.

Please help right now i am getting a blank array.

are you getting data in dataset? If yes, you need to initialize database once you receive data in dataset. — Anuja
– Anuja, Commented Jul 16, 2015 at 6:55

clevertension · Accepted Answer · 2015-07-16 07:32:01Z

1

It is not about jQuery DataTable, you need to use promise to solve your problem

    var tablerows = '';
    var dataSet = [];
    var dataSetPromise = [];
    if (response.hasOwnProperty('records') && response.metadata.record_count > 0) {
        _.each(response.records, function (record) {
            var sku_data = get_api_data(urls.sku.list + "/" + record.skuid, api.access_token);

            if (sku_data != undefined) {
                dataSetPromise.push(sku_data.done(function (sku) {

                    dataSet.push(sku.records[0].name);


                    console.log(dataSet);
                }));



            }

        })

    $.when.apply(null, dataSetPromise).done(function () {
        $('#demo').html('<table cellpadding="0" cellspacing="0" border="0" class="display" id="example"></table>');

        $('#example').dataTable({
            "data": dataSet,
            "columns": [
                { "title": "Product" }
            ],
            "aoColumns": [
                    null
            ]
        });
});

answered Jul 16, 2015 at 7:32

clevertension

7,1274 gold badges30 silver badges34 bronze badges

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

4 Comments

vini Over a year ago

Thanks for this. Though i still get an empty table

clevertension Over a year ago

what's the output of console.log(dataSet)

clevertension Over a year ago

is sku_data a jquery Promise? just like the return value of $.get()

vini Over a year ago

yes. It goes twice inside the $.when once the array has 0 values and once it has 35 values

Collectives™ on Stack Overflow

Load dynamic data in Jquery Data Tables

1 Answer 1

4 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

4 Comments

Your Answer

Sign up or log in

Post as a guest

Related