[英]How to update/refresh datatable after an ajax update or insert call?
I have this table right here that is populated by query results from my database: 我这里有此表,该表由数据库查询结果填充:
<div class="card-block">
<table id="catTbl" class="display" width="100%" cellspacing="0" data-toggle="modal" data-target="#cat-update">
<thead>
<tr>
<th>ID</th>
<th>Title</th>
</tr>
</thead>
<tbody>
<?php
include "../processes/getLists.php";
$process = new getLists();
$process->getCatForTbl();
//used PHP PDO for that
?>
</tbody>
</table>
<p id="message" style="margin-top: 15px"></p>
</div>
I can properly update and insert rows in the database using ajax so the page won't load every after process but the problem is if I don't reload my page after every insert/update the datatable won't update with the newly updated/inserted rows. 我可以使用ajax在数据库中正确更新和插入行,因此该页面不会在以后的每个过程中加载,但是问题是,如果在每次插入/更新之后我都没有重新加载页面,那么数据表将不会使用新更新的/插入的行。
I tried $("#catTbl").ajax.reload()
, $("#catTbl").clear().draw()
but they won't work unless my table is somehow made up of json
. 我尝试了
$("#catTbl").ajax.reload()
, $("#catTbl").clear().draw()
但除非我的表以某种方式由json
组成,否则它们将无法工作。 Is there anything I can do for my table to reload every after ajax call? 在ajax调用之后,我能做些什么来重新加载表吗? Add: I don't want the whole page to reload, just the datatable on submit event.
补充:我不希望整个页面重新加载,而只是提交事件时的数据表。
$('#updateCatForm').on("submit", function(event){
event.preventDefault();
$.ajax({
url:"../ajax/updateCat.php",
method:"POST",
data:$('#updateCatForm').serialize(),
success:function(data){
$('#updateCatForm')[0].reset();
$('#cat-update').modal('hide');
$('#message').html(data);
//I put the table reload solutions here and nothing seemed to work :<
}
})
});
Use this 用这个
$('#example').DataTable().ajax.reload();
Make sure the selector is same. 确保选择器相同。 Or you can simply store in a variable and use it like this
或者您可以简单地存储在变量中并像这样使用它
var table = $('#example').DataTable();
Then after ajax 然后在ajax之后
table.ajax.reload();
---Edit---- - -编辑 - -
table.ajax.reload({
"ajax": {
"url": '${ctx}/work/list_ajax.json',
"type": 'POST',
"data":{
data:$('form').serialize()
}
}
});
I'm not entirely sure about this, I didn't give it a try but it's something along this line to get the data and display on the table. 我对此不太确定,我没有尝试过,但这是获取数据并显示在表上的方法。 I'm sorry I couldn't provide you with a working snippet.
抱歉,我无法为您提供有效的代码段。 Remeber the returned data should be in a proper format or it won't work.
记住返回的数据应采用正确的格式,否则将无法正常工作。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.