Datatable render after AJAX call

Question

I am trying to render a data table by making an AJAX call getting some data from controller and then writing data table. sData['id'] is just a number

Here is my code:

$.post('/admin/user_groups_data/' + sData['id']).done(function(data) {

        $('#user_groups_table').dataTable({
        "bProcessing": true,
        "bDeferRender": true,
        "sPaginationType": "full_numbers",
        "aaData": data, // data here is a JSON object, shows on Firebug correct data and fields

        "aoColumns": [
            { "mData": "id"},
            { "mData": "title" },
            { "mData": "category" },

        ]
    });

  });

Below is my HTML code

<table id="user_groups_table">
                <thead>
                    <tr>
                        <th>ID</th>
                        <th>Name</th>
                        <th>Type</th>
                    </tr>
                </thead>

        </table>

It seems like the data table gets rendered first even before AJAX call is done so it gives me error

DataTables warning (table id = 'user_groups_table'): Requested unknown parameter 'id' from the data source for row 0

I have the .done at top but seems like it doesn't even respect that. Any help would be great. thx

sData['id'] comes from an object, while "mData" "id" comes from a AJAX call. That isn't the issue. — Hard Fitness
– Hard Fitness, Commented Mar 7, 2014 at 23:09
I know but mData:"id" tells datatable to find a property "id" on the data returned on the AJAX call that's what i'm referring to — Eduardo Quintana
– Eduardo Quintana, Commented Mar 7, 2014 at 23:11
If you data object is not like [{'id':1, .. ... .. }] maybe that's the error — Eduardo Quintana
– Eduardo Quintana, Commented Mar 7, 2014 at 23:17
Have you scanned the value "data" via console.log(data) to see if you are getting the right data? — Kyo
– Kyo, Commented Mar 7, 2014 at 23:24

Hard Fitness · Accepted Answer · 2014-03-10 18:49:55Z

1

Just added sAjaxSource to it and it works now, seems like the $.post had not completed yet when data table was being written, sAjaxSource retrieves the data and brings it back and then writes data table.

var oTable = $('#user_groups_table').dataTable({
        "bDestroy": true,
        "bProcessing": true,
        "bDeferRender": true,
        "sPaginationType": "full_numbers",
        //"aaData": data,
        "sAjaxSource": '/admin/user_groups_data/' + sData['id'],
        "aoColumns": [
            { "mData": "group_id", "bVisible": false},
            { "mData": "title" },
            { "mData": "category" },

        ]
        });

answered Mar 10, 2014 at 18:49

Hard Fitness

4523 gold badges9 silver badges24 bronze badges

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

Collectives™ on Stack Overflow

Datatable render after AJAX call

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related