当数据源是数组时，jQuery DataTables 刷新网格

Posted 2023-05-09

【中文标题】当数据源是数组时，jQuery DataTables 刷新网格

【英文标题】：jQuery DataTables refresh the grid when the datasource is an array

【发布时间】：2019-09-04 08:29:28

【问题描述】：

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

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

我无法使用数据表的 ajax 内置功能。

代码如下（为简单起见，去掉了数据处理功能）：

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 内置功能。

【问题讨论】：

我确信使用您的方法的解决方案很简单，但为什么不使用内置的 ajax 功能并在单击按钮时重新加载？我认为您需要存储原始 API 实例 var myTable =$('#bulletins-table').DataTable(..) ...然后在后续请求中使用 if(myTable) myTable.clear() 等

【参考方案1】：

试试

table.rows.add(response.data); 

改为

table.data(response.data);

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