Il y a eu beaucoup de questions à ce sujet mais je n’en ai jamais trouvé qui me convienne. J'ai un tableau HTML simple et clair dont le corps est rempli de lignes d'un appel AJAX . Ensuite, je souhaite mettre à jour le tableau avec le plug-in DataTable mais cela ne fonctionne pas . J'ai un code HTML tableau qui ressemble à ceci:
<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>
Dans mon pageload jQuery
$(document).ready(function(){
var oTable = $('#myTable').dataTable({
"aoColumns": [
{ "bSortable": false },
null, null, null, null
]
});
});
Et enfin ma fonction de changement sur dropdownlist
$("#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
]
});
});
L'annexe et ainsi de suite a été modifiée pour la raccourcir, etc., donc ne vous concentrez pas trop dessus.
Fondamentalement, la question est de savoir comment mettre à jour la table, je peux faire mon AJAX et ajouter de nouvelles données à la table, mais le plug-in datatable ne se met pas à jour avec elle . J'ai essayé d'autres choses comme
.fnDraw (false);
Mais cela ne fait rien. Alors que je reçois une erreur JSON de
fnReloadAjax ()
Des indices sur la façon d'actualiser la table?
Essaye ça
Initialement, vous avez initialisé la table, alors commencez par effacer cette table.
$('#myTable').dataTable().fnDestroy();
Puis initialiser à nouveau après le succès ajax
$('#myTable').dataTable();
Comme ça
$("#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
]
});
});
Je sais que ceci est un ancien message, mais je viens d’enquêter sur le problème et je trouve le moyen le plus simple de le résoudre dans les pages de manuel DataTable: https://datatables.net/reference/api/ajax.reload%28 % 29 Tout ce dont vous avez besoin d’appeler table.ajax.reload ();
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();
});
J'avais fait quelque chose qui se rapporte à cela ... Voici un exemple de code javascript avec ce dont vous avez besoin. Il y a une démo sur ceci ici: 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');
}
}