AJAX调用后数据表呈现

时间:2014-03-07 22:55:34

标签: javascript jquery ajax datatables

我试图通过AJAX调用从控制器获取一些数据然后写入数据表来呈现数据表。 sData ['id']只是一个数字

这是我的代码:

$.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" },

        ]
    });

  });

以下是我的HTML代码

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

        </table>

似乎在AJAX调用完成之前,数据表首先被渲染,因此它给了我错误

DataTables warning(table id ='user_groups_table'):从第0行的数据源请求未知参数'id'

我有.done在顶部,但似乎它甚至不尊重。任何帮助都会很棒。 THX

1 个答案:

答案 0 :(得分:1)

刚刚添加sAjaxSource并且现在可以正常工作,好像$ .post在编写数据表时尚未完成,sAjaxSource检索数据并将其恢复,然后写入数据表。

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" },

        ]
        });