刷新 jQuery 数据表
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/20141432/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Refresh jQuery datatable table
提问by HenrikP
Been plenty of questions about this but I never found one that worked for me. I have a plain and simple HTML table whos body is being filled with rows from an AJAX call. Then I want to update the table with DataTable plugin but it does not work. I have a HTML table that looks like this:
对此有很多问题，但我从未找到适合我的问题。我有一个简单明了的 HTML 表，其正文中填充了来自 AJAX 调用的行。然后我想用 DataTable 插件更新表，但它不起作用。我有一个如下所示的 HTML 表格：
<table id="myTable">
<thead>
<tr>
<th>1</th>
<th>2</th>
<th>3</th>
<th>4</th>
<th>5</th>
</tr>
</thead>
<tbody>
</tbody>
</table>
In my jQuery pageload
在我的 jQuery 页面加载中
$(document).ready(function(){
var oTable = $('#myTable').dataTable({
"aoColumns": [
{ "bSortable": false },
null, null, null, null
]
});
});
And finally my on dropdownlist change function
最后我的下拉列表更改功能
$("#dropdownlist").on("change", function () {
$("tbody").empty();
$.ajax({
type: "POST",
url: "@Url.Action("ActionHere", "Controller")",
dataType: "json",
success: function (data) {
$.each(data, function (key, item) {
$("tbody").append("<tr><td>1</td><td>2</td><td>3</td><td>4</td><td>5</td></tr>");
});
}
})
var oTable = $('#myTable').dataTable(); // Nothing happens
var oTable = $('#myTable').dataTable({ // Cannot initialize it again error
"aoColumns": [
{ "bSortable": false },
null, null, null, null
]
});
});
The append and so on has been modified to shorten it down, etc so do not focus too much on it.
附加等已被修改以将其缩短等，因此不要过多关注它。
Basically the question is how to update the table, I can do my AJAX and add new data to the table fine, but the datatable plugin does not update with it. I've tried other things like
基本上问题是如何更新表，我可以执行 AJAX 并将新数据添加到表中，但是数据表插件不会随之更新。我试过其他的东西，比如
.fnDraw(false);
.fnDraw(false);
But it does nothing While I get an JSON error from
但它什么也没做，虽然我收到了一个 JSON 错误
fnReloadAjax()
fnReloadAjax()
Any clues on just how to refresh the table?
关于如何刷新表格的任何线索？
回答by Sridhar R
Try this
尝试这个
Initially you initialized the table so first clear that table
最初您初始化了表格，因此首先清除该表格
$('#myTable').dataTable().fnDestroy();
$('#myTable').dataTable().fnDestroy();
Then initialize again after ajax success
然后ajax成功后再次初始化
$('#myTable').dataTable();
Like this
像这样
$("#dropdownlist").on("change", function () {
$("tbody").empty();
$.ajax({
type: "POST",
url: "@Url.Action("ActionHere", "Controller")",
dataType: "json",
success: function (data) {
$.each(data, function (key, item) {
$("tbody").append("<tr><td>1</td><td>2</td><td>3</td><td>4</td><td>5</td></tr>");
});
}
})
$('#myTable').dataTable().fnDestroy();
$('#myTable').dataTable({ // Cannot initialize it again error
"aoColumns": [
{ "bSortable": false },
null, null, null, null
]
});
});
回答by Marco
I Know this is an old post, but I've just investigated about the problem and I find the easiest way to solve it in DataTable man pages: https://datatables.net/reference/api/ajax.reload%28%29All you need to call table.ajax.reload();
我知道这是一篇旧帖子，但我刚刚调查了这个问题，我在 DataTable 手册页中找到了解决它的最简单方法：https: //datatables.net/reference/api/ajax.reload%28%29所有你需要调用 table.ajax.reload();
回答by Hariharan.P
var table = $('#product_table').DataTable({
"bProcessing": true,
"serverSide": true,
responsive: true,
"ajax": {
url: get_base_url + "product_table", // json datasource
type: "post", // type of method ,GET/POST/DELETE
error: function () {
$("#employee_grid_processing").css("display", "none");
}
}
});
//call this funtion
$(document).on('click', '#view_product', function () {
table.ajax.reload();
});
回答by Mwangi Thiga
I had done something that relates to this... Below is a sample javascript with what you need. There is a demo on this here: http://codersfolder.com/2016/07/crud-with-php-mysqli-bootstrap-datatables-jquery-plugin/
我做了一些与此相关的事情...下面是一个包含您需要的示例 javascript。这里有一个演示：http: //codersfolder.com/2016/07/crud-with-php-mysqli-bootstrap-datatables-jquery-plugin/
//global the manage member table
var manageMemberTable;
function updateMember(id = null) {
if(id) {
// click on update button
$("#updatebutton").unbind('click').bind('click', function() {
$.ajax({
url: 'webdesign_action/update.php',
type: 'post',
data: {member_id : id},
dataType: 'json',
success:function(response) {
if(response.success == true) {
$(".removeMessages").html('<div class="alert alert-success alert-dismissible" role="alert">'+
'<button type="button" class="close" data-dismiss="alert" aria-label="Close"><span aria-hidden="true">×</span></button>'+
'<strong> <span class="glyphicon glyphicon-ok-sign"></span> </strong>'+response.messages+
'</div>');
// refresh the table
manageMemberTable.ajax.reload();
// close the modal
$("#updateModal").modal('hide');
} else {
$(".removeMessages").html('<div class="alert alert-warning alert-dismissible" role="alert">'+
'<button type="button" class="close" data-dismiss="alert" aria-label="Close"><span aria-hidden="true">×</span></button>'+
'<strong> <span class="glyphicon glyphicon-exclamation-sign"></span> </strong>'+response.messages+
'</div>');
// refresh the table
manageMemberTable.ajax.reload();
// close the modal
$("#updateModal").modal('hide');
}
}
});
}); // click remove btn
} else {
alert('Error: Refresh the page again');
}
}
回答by Prashant Pokhriyal
From version 1.10.0 onwards you can use ajax.reload()api.
从 1.10.0 版本开始，您可以使用ajax.reload()api。
var table = $('#myTable').DataTable();
table.ajax.reload();
Keep in mind to use
$('#myTable').DataTable()and not$('#myTable').dataTable()
请记住使用
$('#myTable').DataTable()而不是$('#myTable').dataTable()
