ajax.reload() doesn't works?
ajax.reload() doesn't works?
ddryfer
Posts: 6Questions: 2Answers: 0
I'm trying to update my table using ajax reload, I did some testing and realized my ajax code is working, but when the ajax reload executes it updates my table but doesn't change anything.
My table (this works, fill mytable and childrows):
var table = null;
var start = null;
var end = null;
//llenar tabla
$(document).ready(function () {
var table = $('#tablanormal').DataTable({
"language": {
"url": "../vendor/datatables/fileSpanish.json"
},
"ajax": {
"url": "../datatables_ajax/data.php",
"dataSrc": ""
},
"dom": "rtipl",
"columns": [
{
className: 'details-control',
orderable: false,
data: null,
defaultContent: '',
render: function () {
return '<i class="fa fa-plus-square" aria-hidden="true"></i>';
},
width: "15px"
},
{"data": "id"},
{"data": "date"},
{"data": "service"},
{"data": "items"},
{"data": "status",
render: function (data, type, row) {
if (row.nombreEstado == "Completado") {
return "<div class='text-center'><div class='btn-group'><button id='btnComplete' class='btn btn-success btn-sm'>" + row.status + "</button></div></div>";
} else {
return "<div class='text-center'><div class='btn-group'><button id='btnComplete' class='btn btn-danger btn-sm'>" + row.status + "</button></div></div>";
}
}
}
],
initComplete: function () {
this.api().columns([3, 5]).every(function (d, i) {
var column = this;
var select = $('<select class="form-control"><option value="">' + "Show all" + '</option></select>')
.appendTo('#filtros' + d)
.on('change', function () {
var val = $.fn.dataTable.util.escapeRegex(
$(this).val()
);
column
.search(val ? '^' + val + '$' : '', true, false)
.draw();
});
column.data().unique().sort().each(function (d, j) {
select.append('<option value="' + d + '">' + d + '</option>')
});
});
}
});
$('#tablanormal tbody').on('click', 'td.details-control', function () {
var tr = $(this).closest('tr');
var tdi = tr.find("i.fa");
var row = table.row(tr);
idsol = 0;
idsol = table.row(this).data().idSolicitud;
idsol = idsol.split("-").pop();
idsol = parseInt(idsol);
if (row.child.isShown()) {
// This row is already open - close it
row.child.hide();
tr.css('background-color', 'White');
tr.removeClass('shown');
tdi.first().removeClass('fa-minus-square');
tdi.first().addClass('fa-plus-square');
} else {
// Open this row
format(idsol, row.child);
tr.css('background-color', '#e8eeff');
tr.addClass('shown');
tr.attr('id', idsol);
tdi.first().removeClass('fa-plus-square');
tdi.first().addClass('fa-minus-square');
}
});
Here I'm trying to update my table by dates using two dates (excluded the code of the dates, did some testing and it actually works but doesn't update the table)
$(document).on("click", "#btnSearch", function (start,end) {
console.log("Callback has been called!");
$('#reportrange span').html(start.format('D/MM/YYYY') + ' - ' + end.format('D/MM/YYYY'));
var final = moment(end).format('YYYY-MM-D');
var inicial = moment(start).format('YYYY-MM-D');
final = final.toString();
inicial = inicial.toString();
$.ajax({
url: "../datatables_ajax/data_dates.php",
type: "POST",
datatype: "json",
data: {
inicial: inicial,
final: final
},
complete: function(data) {
table.ajax.reload(null,false);
}
});
});
May the problem be the child rows? The code adds a column when creating the table, and add other 5 columns from the ajax, but in the ajax.reload() it only have 5 columns and not the extra one(child row).
Sorry for my english.
This discussion has been closed.
Answers
It seems to be working here as expected. Click "change" to change the value for Ashton Cox, then the value is updated on the reload.
Could you look at that, please, and see if it helps. If it's still not working for you, please can you update my example, or link to your page, so that we can see the problem.
Cheers,
Colin
I'm doing the same as you, trying to update using a button, the tableupdates but doesn't change the information, for example the datable shows data of 1 week, if the second ajax (this one also works, I did some testing and it lloads all the new data) run, it loads the info for 1 month, the datatable updates but keeps the same info. doesn't shows the new rows.
Don't know if the childrows is the problemn here, first column is the child rows, the other five are fill from the first ajax, when the second ajax runs, it only loads five columns.
Have you looked at the browser's network inspector tool to see what exactly is returned?
What new rows are you expecting to see? Is the database data changed?
Kevin
Well, when the table loads it show one row of data for the actual month, if i use the second ajax to load the last month data, it loads the seven new row of data, and I want to remove the old row and display these seven new rows.
Tested if the second ajax using a $.each and the console to check if it works, and it actually returns the 7 rows, but as I said the table updates but keep the original row instead of changing to the new data.
I also tried initializing the table again but couldn't do it.
To advance this, it would help if we could see the issue. Can you either modify my example to demonstrate the issue, or link to your page, please,
Colin
I did a good read on the ajax.reload() and looked in to the console for the XHR, as you can see in my code, I have two ajax calls, with two different urls and data files (data and data_dates), when the reload happens instead of loading data from "data_dates" it loads "data" set on the creation of the table (that's how the ajax.reload works) so I did some changes to my code to get the data and it finally works.
With this changes, is only necessary to use table.ajax.reload(); and the table will update.
Tried to explain my solution, but if it isn't good enough, use this links for reference.
https://datatables.net/forums/discussion/39130#Comment_102210
https://datatables.net/reference/api/ajax.reload()#Comments
Now my only problem is that the Column filtering doesn't update with the ajax reload.
As I mentioned before, we'd need to see this. Please can you update my test case as requested,
Colin
Sorry for taking my time, my problem was that I tried reloading the table using ajax.reload but thinking that it would take new data from another ajax call, what I didn't know was that when ajax.reload is used it, it loads data from the original ajax call.
So instead of trying that, just used the first ajax call, and used this example to update depending in the dates selected by the user.
https://datatables.net/reference/api/ajax.reload()#Comments
So, actually did a good read about how ajax.reload works to fix it. If is necessary to post your test case modified to demonstrate my answer I'll do it.