Javascript ajax成功后重新加载数据表
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/38877837/
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
reload datatable after ajax success
提问by MedKostali
I use JQuery DataTable. I send data to datatable onclick in json file at ajax succes .the first click everything is good,But the next click I get only the right data ANd wrong value of dataTables_info it display always the first value of dataTables_info And paginatio AND row too from the first result. This is the first display of data in datatable:
我使用 JQuery 数据表。我在 ajax 成功将数据发送到 json 文件中的数据表 onclick 。第一次点击一切都很好，但下一次点击我只得到正确的数据和错误的 dataTables_info 值它总是显示 dataTables_info 的第一个值和分页和行也来自第一个结果。这是数据表中数据的第一次显示：
ALL the next Click I get only right data:
For this exemple they are one result showing in picture below but everything else(info ,show,pagination) belong to first search showing in the first picture :
所有下一个点击我只得到正确的数据：对于这个例子，它们是显示在下面图片中的一个结果，但其他所有内容（信息，显示，分页）属于第一张图片中显示的第一个搜索：
In the second Exemple When I click at any page of pagination I get the content of the first page result!! This is my function ONclick:
在第二个例子中，当我点击分页的任何页面时，我得到第一页结果的内容！！这是我的功能 ONclick：
$ ( '#ButtonPostJson' ).on('click',function() {
$("tbody").empty();
var forsearch = $("#searchItem").val();
$.ajax({
processing: true,
serverSide: true,
type: 'post',
url: 'searchData.json',
dataType: "json",
data: mysearch,
/* bRetrieve : true,*/
success: function(data) {
$.each(data, function(i, data) {
var body = "<tr>";
body += "<td>" + data.name + "</td>";
..........................
..........................
body += "</tr>";
$('.datatable-ajax-source table').append(body);
})
;
/*DataTables instantiation.*/
$('.datatable-ajax-source table').dataTable();
},
error: function() {
alert('Processus Echoué!');
},
afterSend: function(){
$('.datatable-ajax-source table').dataTable().reload();
/* $('.datatable-ajax-source table').dataTable({bRetrieve : true}).fnDestroy();
$(this).parents().remove();
$('.datatable-ajax-source table').dataTable().clear();*/
}
});
});
I try everything and i dont know what I miss. I use this jquery for datatable:
我尝试了一切，但我不知道我想念什么。我将这个 jquery 用于数据表：
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.10.2/jquery-ui.min.js"></script>
Thanks.
谢谢。
回答by Punit Gajjar
On a button clik you dont need to empty your table body and make initiate the datatable again with the ajax.
在单击按钮时，您不需要清空表体并使用 ajax 再次启动数据表。
you just have to call your ajax again as you have already initiate on document ready function
您只需要再次调用 ajax，因为您已经启动了文档就绪功能
just use
只是使用
$("#Table_id").ajax.reload();
check the below link, you will have better idea.
检查下面的链接，你会有更好的主意。
https://datatables.net/reference/api/ajax.reload()
https://datatables.net/reference/api/ajax.reload()
Let me know if this doesn't help you
如果这对您没有帮助，请告诉我
回答by Sibin John Mattappallil
I created this simple function:
我创建了这个简单的函数：
function refreshTable() {
$('.dataTable').each(function() {
dt = $(this).dataTable();
dt.fnDraw();
})
}
回答by salithlal
use below code..it perfectly work, it keep your pagination without lose current page
使用下面的代码..它完美地工作，它可以保持你的分页而不会丢失当前页面
$("#table-example").DataTable().ajax.reload(null, false );
$("#table-example").DataTable().ajax.reload(null, false);
回答by sixstring
I had this same problem. I found a function I wrote on a project that deals with this. Here is a simple 2 column table I made.
我有同样的问题。我在一个项目中找到了一个处理这个问题的函数。这是我制作的一个简单的 2 列表。
<table id="memberships" class="table table-striped table-bordered table-hover" width="100%">
<thead>
<tr>
<th>Member Name</th>
<th>Location</th>
</tr>
</thead>
<tfoot>
<tr>
<th>Member Name</th>
<th>Location</th>
</tr>
</tfoot>
</table>
This is my script to populate it:
这是我填充它的脚本：
function drawTable(){
var table = $('#memberships').DataTable();
table.destroy();
value = $("#memberName").val();
console.log("member name-->>" + value);
$('#memberships').DataTable({
responsive:true,
pageLength: 50,
ajax:{
"url": `//BACKEND API CALL`,
"type":"get",
"dataSrc": 'members'//my data is in an array called members
},
columns: [
{"data": "name_display" },
{"targets": 0,
"data": "membershipID",
"render": function ( data, type, full, meta ) {
return '<button type="button" class="btn btn-info btn-block"
onclick="editMember(' + data + ')">Edit Member</button><button
type="button" class="btn btn-danger btn-block"
onclick="deleteMember(' + data + ')">Delete</button>';
}
}
]
});
$.fn.dataTable.ext.errMode = 'none';
}
You can ignore my column render function. I needed 2 buttons based on the data returned. The key was the table.destroy in the function. I created the table in a variable called table. I destroy it right in this initialization because it allowed me to use this same function over and over. The first time it destroys an empty table. Each call after that destroys the data and repopulates it from the ajax call.
您可以忽略我的列渲染功能。根据返回的数据，我需要 2 个按钮。关键是函数中的 table.destroy。我在一个名为 table 的变量中创建了该表。我在这个初始化过程中直接销毁了它，因为它允许我一遍又一遍地使用相同的函数。它第一次销毁一个空表。之后的每次调用都会破坏数据并从 ajax 调用中重新填充它。
Hope this helps.
希望这可以帮助。
回答by M Abdullah
.reload() is not working properly untill we pass some parameter
.reload() 不能正常工作，直到我们传递一些参数
var = $("#example").DataTable() ;
datatbale_name.ajax.reload(null, false );
回答by Waqar Sharif
Use like it
喜欢就用
$('#product_table').DataTable().ajax.reload();
回答by Adarsh Madrecha
$("#Table_id").ajax.reload();did not work.
$("#Table_id").ajax.reload();不工作。
I implemented -
我实施 -
var mytbl = $("#Table_id").datatable();
mytbl.ajax.reload;
