AJAX 调用后的数据表渲染答案

【问题标题】：Datatable render after AJAX callAJAX 调用后的数据表渲染
【发布时间】：2014-03-11 02:49:55
【问题描述】：

我正在尝试通过 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 警告（表 id = 'user_groups_table'）：从第 0 行的数据源请求未知参数 'id'

我在顶部有 .done，但似乎它甚至不尊重这一点。任何帮助都会很棒。谢谢

【问题讨论】：

数据对象有相同的键“id”？
sData['id'] 来自对象，而 "mData" "id" 来自 AJAX 调用。这不是问题。
我知道，但是 mData:"id" 告诉 datatable 在 AJAX 调用返回的数据上找到属性“id”，这就是我所指的
如果你的数据对象不像 [{'id':1, .. ... .. }] 可能就是这个错误
您是否通过 console.log(data) 扫描了值“data”以查看是否获得了正确的数据？

标签： javascript jquery ajax datatables

【解决方案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" },

        ]
        });

【讨论】：