javascript - 当数据源是数组时,jQuery DataTables 刷新网格

标签 javascript jquery ajax datatables

我有一个数据表,每次单击按钮时都应该刷新。

通过单击此按钮,我将使用 ajax 从 API 加载 JSON 流。数据将被处理,然后设置为数据表中的数据源。

我无法使用数据表的 ajax 内置功能。<​​/p>

代码如下(为简单起见,删除了数据处理函数):

function loadBulletins(categoryID) {
    $.ajax({
        url: '/api/bulletins.ashx',
        type: "POST",
        dataType: "json",
        data: { method: "getbulletins", iso3: iso3, catid:categoryID },
        success: function (response) {
            if ($.fn.dataTable.isDataTable('#bulletins-table')) {
                table = $('#bulletins-table').DataTable();
                table.clear();
                table.data(response.data); //it seems like the update here doesn't work
                table.draw();  //Table is not updated!!
                //table.ajax.reload();  //it only works with ajax builtin
            }
            else {
                $('#bulletins-table').DataTable({
                    deferRender: true,
                    "bLengthChange": false,
                    responsive: true,
                    "autoWidth": false,
                    "bInfo": false,
                    "bFilter": false,
                    data: response.data
                });
            }
        },
        error: function (XMLHttpRequest, textStatus, errorThrown) {
            console.log("loadBulletins Status: " + textStatus, "Error: " + errorThrown);
        }
    });
}

当用户点击某些按钮时,会调用上述函数,传递不同的categoryID值,从而从API加载不同的数据。

API返回的数据如下:

{
    "data": [
        ["8", "Emergency Assessment: Faryab Province", "2", "2018", "00065098/download/", "", "", "", ""],
        ["", "XXX/NRC Emergency Shelter Assessment: Khogiani", "12", "2017", "00050404/download/", "", "", "", ""],
        ["7", "Emergency Market Assessment: Sayad and Qush Tepa Districts", "9", "2017", "000022544/download/", "", "", "", ""],
        ["6", "Emergency Assessment Bulletin: Darz Ab District (Jawzjan) - Rapid Assessment", "7", "2017", "019342/download/", "", "", "", ""],
        ["5", "Emergency Flash Update: Bala Buluk District: Farah Province - Conflict Rapid Assessment", "3", "2017", "1236.pdf", "", "", "", ""],
        ["4", "Emergency Flash Update: Faryab Province - Conflict Rapid Assessment", "1", "2017", "754.pdf", "", "", "", ""],
        ["3", "Emergency Flash Update: Kohistan District (Faryab) - Conflict Rapid Assessment", "11", "2016", "8973.pdf", "", "", "", ""],
        ["2", "Emergency Flash Update: Farah Province - Conflict Rapid Assessment", "11", "2016", "88394.pdf", "", "", "", ""],
        ["1", "Emergency Flash Update: Kunduz Province - Conflict Rapid Assessment", "10", "2016", "88308.pdf", "", "", "", ""]
    ]
}

第一次加载时,数据表工作正常,我可以看到数据。

第二次单击时,ajax 调用起作用,因为我可以在网络选项卡中看到响应,但数据表未更新。我已经尝试了文档中的所有建议,但它们都不起作用,它们通常指的是数据表的 ajax 内置功能。<​​/p>

最佳答案

尝试

table.rows.add(response.data); 

而不是

table.data(response.data);

或者销毁并重新初始化数据表。

关于javascript - 当数据源是数组时,jQuery DataTables 刷新网格,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/55670855/

相关文章:

javascript - 未捕获的类型错误 : Object #<HTMLDivElement> has no method 'offset'

javascript - 如何检查特定div下的特定文本框是否为空

java - JQuery AJAX Done 未执行

javascript - 我正在尝试使用 balloon.js 显示气球

javascript - 为什么在单击之前不加载旋钮的背景颜色? [Angular.js]

javascript - 通过选择的 Jquery 更新选择

Javascript Jquery 下拉菜单隐藏在空白处,但是它会破坏下拉菜单直到刷新

javascript - 对如何将数组中的值与另一个变量一起使用感到困惑

jquery - Ajax/jQuery 问题

javascript - 对象内的 XMLHttpRequest : how to keep the reference to "this"