Problem with paginator server-side
Problem with paginator server-side
Maxilboss93
Posts: 33Questions: 6Answers: 0
the datatable paginator creates 2 empty pages instead of stopping, why?
This is my code of table:
var oTable = $tableAllievi2.DataTable({
"scrollY": "200px",
"scrollCollapse": true,
"processing": true,
"serverSide": true,
"paging": true,
"info": false,
"aLengthMenu": [
[10, 25, 50, 75, 100, 250, 500, -1],
[10, 25, 50, 75, 100, 250, 500, "All"]
],
"select": true,
"select": {
style: 'multi'
},
"pageLength": 25,
//"pagingType": "numbers",
"responsive": false,
"autoWidth": false,
"language": {
"sEmptyTable": "Nessun dato presente nella tabella",
"sInfo": "",
"sInfoEmpty": "",
"sInfoFiltered": "(filtrati da _MAX_ elementi totali)",
"sInfoPostFix": "",
"sInfoThousands": ".",
"sLengthMenu": options,
"sLoadingRecords": "Caricamento...",
"sProcessing": "Elaborazione...",
"sSearch": "",
"sSearch[value]": "",
"searchPlaceholder": "Cerca allievo...",
"sZeroRecords": "La ricerca non ha portato alcun risultato.",
"oPaginate": {
"sFirst": "Inizio",
"sPrevious": '<img height="35" class="arrow_sx">',
"sNext": '<img height="35" class="arrow_dx">',
"sLast": "Fine"
},
"oAria": {
"sSortAscending": ": attiva per ordinare la colonna in ordine crescente",
"sSortDescending": ": attiva per ordinare la colonna in ordine decrescente"
},
},
"ajax": {
"url": "./ajax/mediaweb/getQuizAula.php",
"data": { "listato": listato, "id_sedeClienteNeca": id_sedeClienteNeca },
"dataSrc": function (json_data) {
console.log("json_data allievi: ", json_data);
json_data.iTotalRecords = json_data.recordsTotal;
json_data.iTotalDisplayRecords = json_data.recordsFiltered;
var array_allievi = [];
var id_sedeClienteNeca = "";
if (json_data.rows.length == 0) {
//prima volta
// console.log("default:",);
id_sedeClienteNeca = $(".titolo_autoscuola")[0].attributes[1].nodeValue;
array_allievi = [];
} else {
id_sedeClienteNeca = json_data.rows[0].id_sedeClienteNeca;
for (var i = 0; i < json_data.rows.length; i++) {
array_allievi.push(json_data.rows[i].Allievo);
}
}
$.ajax({
type: "POST",
url: "./ajax/mediaweb/partecipaQuiz.php",
data: { "allievi": array_allievi, "id_sedeClienteNeca": id_sedeClienteNeca },
success: function (data) {
// console.log("allievi_partecipanti: ", data);
var allievi_partecipanti = JSON.parse(data);
//allievi_partecipanti = allievi_partecipanti.toUpperCase();
var arr_partec = [];
for (var i = 0; i < allievi_partecipanti.length; i++) {
arr_partec.push(allievi_partecipanti[i].toUpperCase());
// allievi_partecipanti = allievi_partecipanti[i].toUpperCase();
}
var array_part = [];
var i = 0;
var j = 0;
var a, b;
var checkbox, trovati, righe;
var rows = oTable.rows('tr').indexes();
var data = oTable.rows(rows).data();
var arr_rows = []
for (var j = 0; j < data.length; j++) {
arr_rows.push(data[j].Allievo.toUpperCase());
}
// console.log("arr_rows: ", arr_rows);
// arr_partec = arr_partec.toUpperCase();
var anagrafica;
// console.log("arr_partec: ", arr_partec);
$(document).on('click', '#tableQuizAulaAllieviAnag tr', function (e) {
var oTable = $tableAllievi2.DataTable();
oTable.state.save();
$(".confirmBtn").attr("disabled", false);
var allieviSel = oTable.rows({ selected: true }).data();
$("#confirmBtn").attr("disabled", false);
})
}
});
var start = document.getElementById("start_page");
$(start).text(json_data.start + " , " + json_data.limit);
var allievitot = document.getElementsByClassName("totale");
$(allievitot).text(json_data.recordsTotal);
var selectAllievi = oTable.rows({ selected: true }).data();
$(".allievi_tot").text(json_data.recordsTotal);
var storageID = localStorage.getItem("storageID");
//console.log("storageID: ", storageID);
if (storageID != null) {
$("#confirmBtn").attr("disabled", false);
}
//$("#confirmBtn").attr("disabled", false);
return json_data.rows;
},
},
"columns": [
{ responsivePriority: 1, "data": "__rank", className: "dt-center id" },
{ responsivePriority: 1, "data": "Allievo", className: "dt-center myAnag" },
],
"rowId": '__rank',
"createdRow": function (row, data, dataIndex) {
$(row).css({
"font-size": "14px",
"line-height": "1.4"
});
},
'stateSave': true,
'stateSaveParams': function (settings, data) {
data.selected = this.api().rows({ selected: true })[0];
var arr_selection = [];
var saveSelectionPage = [];
// localStorage.removeItem("selezioni");
// console.log("storageID page1 reload: ",localStorage.getItem("storageID"));
// localStorage.removeItem("storageID");
if (localStorage.getItem("storageID") != null) {
var store2 = localStorage.getItem("storageID");
store2 = JSON.parse(localStorage.getItem("storageID"));
for (var i = 0; i < store2.length; i++) {
$("#" + store2[i]).addClass("selected");
}
}
},
'stateLoadParams': function (settings, data) {
savedSelected = data.selected;
},
'initComplete': function (settings) {
if (savedSelected != undefined) {
this.api().rows(savedSelected).select();
var riga = this.api().rows(savedSelected).select();
this.api().state.save();
getSelectedScrollY(riga);
}
},
"stateDuration": 60 * 30
});
Answers
Not sure what all your
ajax.dataSrccode is doing but we would need to see the problem happen to help debug. You are using server side processing so we will need to see what it is sending back to start debugging.In line 102 you are creating a click event each time an ajax request is sent, ie, each server side processing request. This will create multiple event handlers. You will probably want to move this code either to
initCompleteor outside of the Datatables initialization code so it executes only once.Kevin
yes sorry, this is a similar json response:
Wait a second....it's obviously, i have 83 from record total but only 22 element in row!
Not sure what you mean by
but only 22 element in row. Since you have server side processing enabled the number of rows returned in JSON should equal the page length. TherecordsTotalandrecordsFilteredtell Datatables how many records there are to set the paging correctly. See the Server Side Processing Protocol docs for details.Are you expecting many thousands of rows? Maybe you don't need server side processing. See the Processing Modes docs.
Kevin