数据应该每 5 秒替换一次表中的旧数据，但每次 jQuery 都会添加

Question

我正在使用数据表，并尝试每隔几秒钟刷新一次传入的数据而不刷新页面。初始页面加载有效，但在设置的延迟后，我收到错误"数据表警告(表 ID = '示例'(：无法重新初始化数据表"。查看数据表网站寻求帮助，但找不到特定于我的设置的任何内容。任何反馈表示赞赏。

<div class="container">
<div class="row" style="text-align:center;margin-bottom:30px">
<h2 class="col-xs-12">
Cryptocurrency Market Capitalizations
</h2>
<h5>$USD</h5>
</div>
<div class="row">
<div class="col-xs-12" style="padding:0">
<table id="dataTable" class="table table-bordered hover" style="margin:0 auto">
<thead id="tableHeader">
<tr>
<td>#</td>
<td>Name</td>
<td>Price</td>
<td>Market Cap</td>
<td>Available Supply</td>
<td>24 HR % Change</td>
</tr>
</thead>
<tbody class="mainTable">
</tbody>
</table>
</div>
</div>
<div class="row">
<div class="col-xs-12" style="text-align:center;margin-top:50px">
<img src="imgs/loading.gif" style="height:120px" id="loading">
</div>
</div>
</div>

这是JavaScript

function executeQuery() {
$.ajax({
url: "http://coincap.io/front",
type: "GET",
dataType: "json",
success: function (data) {
var items = [];
var len = data.length;
for (var i = 0; i < len; i++) {
var numFormat = data[i].price.toLocaleString("en");
var numFormat1 = data[i].mktcap.toLocaleString("en");
var numFormat2 = data[i].supply.toLocaleString("en");
var lowerCaseName = data[i].long.toLowerCase();
items.push("<tr><td>" + [i+1] + "</td><td> <span class='sprite sprite-" + lowerCaseName + " small_coin_logo'></span>" + data[i].long + " - " + data[i].short + "</td><td> $" + numFormat + "</td><td> $" + numFormat1 + "</td><td>" + numFormat2 + "</td><td class='marketChange'>" + data[i].cap24hrChange + "% </td></tr>");
}
$(".mainTable").append(items.join(""));
},
complete: function() {            }
});
setTimeout(executeQuery, 5000);
}
$(document).ready(function() { $("#loading").addClass("hide");
$('#dataTable').DataTable({
"lengthMenu": [ 20, 50, 75, 100 ],
"order": [[ 3, "desc" ]],
language: { search: "" }
});
$('#dataTable_filter input[type="search"]').attr('placeholder', 'Search for coins');
$('#dataTable_filter input[type="search"]').css("padding-left","9px");
setTimeout(executeQuery, 5000);
});
setInterval(function() {  $('#dataTable')[0].contentWindow.location.reload(true);}, 1500);

Answer 1

使用.DataTable().ajax.reload();

改变

setInterval(function() {  $('#dataTable')[0].contentWindow.location.reload(true);}, 1500);

自

setInterval(function() {  $('#DataTable').DataTable().ajax.reload();}, 1500);

简单的例子：jsfiddle

您的示例：jsfiddle2