Datatables ajax callback doesn't populate table

Question

I rarely if ever do javascript so I'm fairly certain that this is either a misconfiguration or something I'm missing.

I'm using Datatables v1.10.7. I have a table that has all the necessary required pars, a thead, tfoot and a tbody. In that order.

I'm using serverside processing to get some data and populate the table.

Due to the fact that I want to add some other things not related to datatable but related to the data that it gets I wanted to have a callback function.

$('#target-list-li').DataTable({
    processing: true,
    serverSide: true,
    pageLength: 100,
    ajax: {
        url: ajax_url,
        success: function(data) {
            // Do other stuff here
            return data;
        }
    },

    columns: [
        {
            data: 'trans_source_id',
            render: function (data, type, row) {
                var html = '';

                html += '<input type="checkbox" id="check-' + row.trans_source_id + '" ';

            },
            orderable: false
        },

        // more columns would go here but I've removed them since it's irrelevant to the question
});

The "problem" or rather misunderstanding of it works probably, is with this bit of code success: function(data).

I expected to be able to do some work with the data and then return the data. Do note that I'm not altering the original data in anyway, I just want to extract some information from it.

success: function(data) {
    // Some some stuff here
    return data;
}

However that doesn't work at all. Even if I simply return the data the table won't get populate. It fact, it simply hangs on the ajax call. It does get completed, but nothing gets populated.

The recommended go to option for ajax apparently is dataSrc. The documentations says so

dataSrc: function(data) {
    return data;
}

That does "sort of" work, the table gets populated with no data, at least it's an improvement from the success.

This is how my table looks with the dataSrc attribute.

The documentation is vague at best regarding this, or at least I can't seem to find something relevant for my problem.

What I expected to happen was: Make the ajax call, use the data for some callback while not altering the original in anyway. Do my things, return original data and that's that.

Clearly that's not the case here.

If anybody can point me in the right direct here I'd appreciate it.

can you put down your json structure? and yes do not use success instead use dataSrc if you have to modify response before passing it to datatable. If you are not modifying data then just do "ajax": { "url": ajax_url, "type": "POST" } — Sagar
– Sagar, Commented Dec 14, 2018 at 22:03

Shidersz · Accepted Answer · 2018-12-15 15:38:21Z

1

I have worked with a project using Datatables plugin and the common approach on it was:

1) First get the data making an ajax post to the server.

2) Once the server response with the data, use the success callback to process the data as you want and finally create and render the table.

For the example of code you have, the approach will be something like this:

// First, make an ajax post to get data from the server.

$.ajax({
    type: "POST", /* You could use GET if the server support it */
    dataType: "json" /* Use the adequate type for your case */,
    url: ajax_url,
    success: function(data)
    {
        // Log the data to check the structure.
        console.log(data);

        // Pre-process data here...

        // Create and render the datatable.
        // We assume, "data.data" holds the source data for the table.
        createDatatable(data.data);
    },
    error: function()
    {
        alert('Failed to get data from server');
    }
});

// Method for create and render the datatable.

function createDatatable(srcData)
{    
    $('#target-list-li').DataTable({
        pageLength: 100,
        data: srcData,
        columns: [
            {
                data: 'trans_source_id',
                render: function (data, type, row)
                {
                    var html = '';
                    var sId = row.trans_source_id;
                    html += '<input type="checkbox" id="check-' + sId + '" ';
                },
                orderable: false
            },
            // More columns would go here but I've removed them since
            // it's irrelevant to the question.
        ],
    });
}

edited Dec 15, 2018 at 15:38

answered Dec 14, 2018 at 21:29

Shidersz

17.2k2 gold badges28 silver badges52 bronze badges

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

1 Comment

Andrei Over a year ago

It was a fluke on my part actually. I should have returned data.data instead of simply data. The object recieved had {data : {data : [....]}, draw: 1 ...}. If you edit your answer I can accept it since others may come across the same problem in the future. As silly of a problem as it is.

Collectives™ on Stack Overflow

Datatables ajax callback doesn't populate table

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related