【发布时间】: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()等
标签: javascript jquery ajax datatables