CODEWITHSUNDEEP
javascriptajaxdatatabledatatables
Andrei
Andrei

Reputation: 3588

Datatables ajax callback doesn't populate table

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.

enter image description here

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.

enter image description here

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.

Upvotes: 2

Views: 1194

Answers (1)

Shidersz
Shidersz

Reputation: 17190

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.
        ],
    });
}

Upvotes: 1

Related Questions