我的网页中有一个普通的数据表，它看起来像这样:
$(document).ready(function() {
var table = $('#mydb').DataTable({
"serverSide": true,
"ajax": "/myapi/?item=free&format=datatables",
"columns": [
{data: "item",
{data: "Price"},
]
});
setInterval( function () {
table.ajax.reload();
}, 10000 );
});
此表每 10 秒刷新一次，从我的数据库中检索最新值。
现在，我想添加一个按钮来动态更改网页的内容，以便它从 ?item=taken 中检索值而不是 ?item=free , 无需刷新页面。
这是我尝试过的:
var myvar = 'item=free'
function ChangeVar(){
myvar = 'item=taken'
}
$(document).ready(function() {
var table = $('#mydb').DataTable({
"serverSide": true,
"ajax": "/myapi/?'+ myvar + '&format=datatables",
"columns": [
{data: "item",
{data: "Price"},
]
});
setInterval( function () {
table.ajax.reload();
}, 10000 );
});
HTML
<button onclick="ChangeVar()" name="button5" type="submit" class="btn btn-primary">See taken items</button>
我添加了一个指向函数 ChangeVar() 的按钮，该函数应更改在 ajax 请求中使用的主变量的名称。那行不通，可能是因为我没有正确使用变量的范围，而且我认为它行不通，因为 Ajax 是异步的，所以我需要添加更多内容。
有人可以指出可以解决此问题的解决方案吗？
最佳答案
DataTables 有自己的动态改变 ajax URL 的方法:table.ajax.url('URL')。因此，您不必每次都销毁对象并重新创建。
我已经制作了下面的示例，因此每个间隔都会重新加载间隔。但是，当使用 table.ajax.url('') 时，您可以链接 .load()立即检索数据的方法。
看这个例子:
$(document).ready(function() {
let test = $('#example').DataTable({
ajax: {
url: 'https://jsonplaceholder.typicode.com/posts',
dataSrc: ''
},
columns: [{
data: 'userId'
},
{
data: 'id'
},
{
data: 'title'
}
]
});
changeVar = function() {
test.ajax.url("https://jsonplaceholder.typicode.com/albums");
}
setInterval(function() {
test.ajax.reload();
console.log("Interval");
}, 10000);
});<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdn.datatables.net/1.10.11/js/jquery.dataTables.min.js"></script>
<link href="https://cdn.datatables.net/1.10.11/css/jquery.dataTables.min.css" rel="stylesheet" />
<body>
<button onclick="changeVar()" name="button5" type="submit" class="btn btn-primary">See taken items</button>
<br><br>
<div id="container">
<table id="example" class="display" cellspacing="0" width="100%">
<thead>
<tr>
<th>ID</th>
<th>Title</th>
<th>Body</th>
</tr>
</thead>
</table>
</div>
</body>关于javascript - 动态更改 Ajax 请求的 url，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/58670298/