1
jQuery DataTablesを使用しています。 AJAXリクエストの後、私はthe ajax.reload()
メソッドを呼び出して私のdataTableをリフレッシュするが、私は現在のページを失う。最初のページを返します。ここでDataTables ajax.reload()がページを失う
は私のDataTableがinitのである:
datatable_appointments = $('#datatable_appointments').DataTable({
"responsive" : true,
"processing" : true,
"serverSide": true,
"bSort" : false,
"ajax": function(data, callback, settings) {
// make a regular ajax request using data.start and data.length
$.get(URL_API + URL_APPOINTMENTS_STATE + '/', {
limit: data.length,
offset: data.start,
search: data.search.value
}, function(res) {
if (res.error) {
callback({
recordsTotal: 0,
recordsFiltered: 0,
data : ""
});
} else {
data_appointments = res.data;
// map your server's response to the DataTables format and pass it to
// DataTables' callback
callback({
recordsTotal: res.total_data,
recordsFiltered: res.total_data,
data: res.data
});
$("#datatable_appointments > tbody > tr > td").addClass("text-center");
$("#datatable_appointments > tbody > tr > td").css("vertical-align", "middle");
$("#datatable_appointments > thead > tr > th").addClass("text-center");
}
});
},
"columns" : [
{ "data": "service_name"},
{ "data": "doctor_info"},
{ "data": "patient_name", render: function (data, type, row, meta) {
return row.name + " " + row.surname;
}},
{ "data": "appointment_date", render: function (data, type, row, meta) {
var formattedDate = new Date(row.appointment_date);
var day = formattedDate.getDate();
var month = formattedDate.getMonth();
var hours = (formattedDate.getHours().toString().length == 1) ? '0' + formattedDate.getHours() : formattedDate.getHours();
hours += ':';
hours += (formattedDate.getMinutes().toString().length == 1) ? formattedDate.getMinutes() + '0' : formattedDate.getMinutes();
return day + ' ' + months[month] + ', ' + hours;
}},
{ "data": "state", render: function (data, type, row, meta) {
if (row.state == '0')
return '<i class="fa fa-circle font-red-mint"></i><br />İptal';
else if (row.state == '1')
return '<i class="fa fa-circle font-green-jungle"></i><br />Onaylı';
else if (row.state == '2')
return '<i class="fa fa-circle font-grey-salsa"></i><br />Beklemede';
}},
{ "data": "actions", render: function (data, type, row, meta) {
if (row.state == '2')
return '<div class="btn-group btn-group-circle">' +
'<button type="button" onclick="setState(\''+row.id+'\', \'1\');" class="btn btn-outline green btn-sm">Onayla</button>' +
'<button type="button" onclick="setState(\''+row.id+'\', \'0\');" class="btn btn-outline red btn-sm">İptal Et</button>' +
'</div>';
else
return '';
}}
],
"sPaginationType": "full_numbers",
"language": {
"emptyTable": "Kayıt bulunamadı.",
"sZeroRecords": "Bu kriterde sonuç bulunamadı.",
"search": "Bul",
"sProcessing" : "<img src='/assets/global/img/loading-spinner-blue.gif' />",
"sInfo": "Toplam <b>_TOTAL_</b> veri bulunmaktadır.",
"sLengthMenu": "Gösterilen kayıt sayısı _MENU_",
"sInfoFiltered": "",
"sInfoEmpty":"",
"paginate": {
"sPrevious": "Önceki",
"sNext": "Sonraki",
"sFirst" : "İlk",
"sLast" : "Son"
}
}
});
と同じのjsファイル内の私setState
方法:
function setState(id, state) {
$.ajax({
url : URL_API + URL_APPOINTMENTS_STATE + '/' + id,
type : 'put',
data : {'state' : state},
dataType : 'json',
success : function (response) {
if (response.error) {
} else {
datatable_appointments.ajax.reload();
}
}
});
}