如何使用 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","employer":"ADAS"}]

我已经尝试过文档AJAX option 并正在调用以下函数：

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","employer":"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
                                }
            ]
        });