如何使用AJAX选项填充JQuery数据表

Question

请有人建议我如何在JQuery数据表上使用AJAX选项。我目前正在使用AJAX检索数据，然后将其作为数据变量传递给设置表时使用：

$table = $('#cat_content_datatable').DataTable ( {
    select: {
        style: 'single'
    },
    data:data,
    "bFilter": false, // remove search filter
    "order": [],
    responsive: true,
    columns:    [
                    { 'data': null },
                    { 'data': 'content_id' },
                    { 'data': 'employer' }
                ],
    "columnDefs":   [ 
                        {
                            "targets": -3,
                            "orderable": false,
                            "data": null,
                            "defaultContent": "<button type = 'button' class='btn btn-xs btn-primary'>Select</button>"
                        },
                        {
                            "targets": [ 1 ],
                            "visible": false,
                            "searchable": false
                        }
                    ]
});

这很好但我想在数据表上使用AJAX重载选项。

传递给表的数据是：

  

[{ “CONTENT_ID”： “47”， “雇主”： “ADAS”}]

我已经尝试了文档superfly-css-variables-colors并调用了以下函数：

function populateCatEmpDT (catDesc, catID, action) {

$table = $('#cat_content_datatable').DataTable ( {
    select: {
        style: 'single'
    },
    ajax: {
        url: '../workflow_ajax/fields/ajax.php',
        method: 'GET',
        data: {catDesc: catDesc, catID:catID, emp:'BT', action: action},
        dataType: 'json',
        type: 'POST'
    },
    "bFilter": false, // remove search filter
    "order": [],
    responsive: true,
    columns:    [
                    { 'data': null },
                    { 'data': 'content_id' },
                    { 'data': 'employer' }
                ],
    "columnDefs":   [ 
                        {
                            "targets": -3,
                            "orderable": false,
                            "data": null,
                            "defaultContent": "<button type = 'button' class='btn btn-xs btn-primary'>Select</button>"
                        },
                        {
                            "targets": [ 1 ],
                            "visible": false,
                            "searchable": false
                        }
                    ]
});

}

我可以从控制台看到我正在检索相同的数据：

  

[{ “CONTENT_ID”： “47”， “雇主”： “ADAS”}]

但是数据表迭代只是说“正在加载......”并且在控制台中我收到错误：

  

TypeError：f未定义

任何人都可以帮忙吗？非常感谢。

Bindrid，感谢您的帮助，并对延迟回复道歉。最后我使用了以下代码：

function populateTooltipDT(contentID) {

    $table = $('#tooltip_datatable').DataTable ( {
        select: {
            style: 'single'
        },
        destroy: true,
        ajax: {
            url: '../workflow_ajax/tooltips/ajax.php',
            type: 'POST',
            data: {contentID: contentID},
            dataType: 'json',
            dataFilter: function(data){
                // DataFilter is where you can change the json data format from what your server sends to 
                // what DataTable expects.
                // if your data is serialized at this point, deserialize it
                var jData = JSON.parse(data);

                // then what the DataTables expect and reserialize
                var dtData =JSON.stringify( {"data": jData});
                console.log(dtData);
                return dtData;
            }
        },
        "bFilter": false, // remove search filter
        "order": [],
        responsive: true,
        columns:    [
                        { 'data': null },
                        { 'data': 'id' },
                        { 'data': 'keyword' },
                        { 'data': 'tip' },
                        { 'data': null }
                    ],
        "columnDefs":   [ 
                            {
                                "targets": -5,
                                "orderable": false,
                                "data": null,
                                "defaultContent": "<button type = 'button' class='btn btn-xs btn-warning'>Edit</button>"
                            },
                            {
                                "targets": [4],
                                "orderable": false,
                                "data": null,
                                "defaultContent": "<button type = 'button' class='btn btn-xs btn-danger'>Delete</button>"
                            },
                            {
                                "targets": [ 1 ],
                                "visible": false,
                                "searchable": false
                            }
                        ]
    });

}

Answer 1

这是我对你的东西应该是什么样子的解释。这是一个最佳猜测，因此您可能需要进行调整。

$table = $('#cat_content_datatable').DataTable ( {
            select: {
                style: 'single'
            },
            ajax: {
                url: '../workflow_ajax/fields/ajax.php',
                type: 'POST',
                data: {catDesc: catDesc, catID:catID, emp:'BT', action: action},
                dataType: 'json',
                // this tells the client that the data coming back from the server is also JSON formatted data.
                contentType: "application/json; charset=utf-8",
                dataFilter: function(data){
                    // DataFilter is where you can change the json data format from what your server sends to 
                    // what DataTable expects.
                    // if your data is serialized at this point, deserialize it
                    var jData = JSON.parse(data);

                    // then what the DataTables expect and reserialize
                    var dtData =JSON.stringify( {"data": jData});
                    return dtData

                }
            },
            "bFilter": false, // remove search filter
            "order": [],
            responsive: true,
            columns:    [
                            { 'data': null },
                            { 'data': 'content_id' },
                            { 'data': 'employer' }
            ],
            "columnDefs":   [ 
                                {
                                    "targets": -3,
                                    "orderable": false,
                                    "data": null,
                                    "defaultContent": "<button type = 'button' class='btn btn-xs btn-primary'>Select</button>"
                                },
                                {
                                    "targets": [ 1 ],
                                    "visible": false,
                                    "searchable": false
                                }
            ]
        });