when the pager changes, it loses the selection
when the pager changes, it loses the selection
Maxilboss93
Posts: 33Questions: 6Answers: 0
this is my datatable server_side:
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...",
"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) {
/*
* my code
*/
return json_data.rows;
},
},
"columns": [
{ responsivePriority: 1, "data": "__rank", className: "dt-center" },
{ responsivePriority: 1, "data": "Allievo", className: "dt-center myAnag" },
],
'stateSave': true,
'stateSaveParams': function (settings, data) {
data.selected = this.api().rows({ selected: true })[0];
},
'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);
} else {
this.api().rows(0).select();
}
},
"stateDuration": 60 * 30
});
oTable.on('select deselect', function (e, dt, type, indexes) {
oTable.state.save();
var count = oTable.rows({ selected: true }).count();
$(".allievi_selezionati").text(count);
});
'''
When i select many rows and after try to click on paginate_button, rows loses the selection and my data.selected become [].
How do i save the state of the table even on page change so that when i go back to the previous page it is still selected?
Answers
You need to set
rowId
to have Select reselect the rows that you previously had selected, when you reshow a page.Keep in mind that since you are using server-side processing, the rows on the other pages don't "exist" at the client-side when not shown, so API methods such as
rows().data()
will not be able to get the data from them until they are shown again.Allan
in my code i have this:
"columns": [
{ responsivePriority: 1, "data": "__rank", className: "dt-center" },
{ responsivePriority: 1, "data": "Allievo", className: "dt-center myAnag" },
],
do i have a way with the __rank field to save the selected rows and then reload them when i get back to that page?
Otherwise how can I use the rowId to do this thing?
Among other things, I should save it every time I change:
* page
* table size
Is
__rank
the primary key (or otherwise unique value)? If so, add:do your DataTables configuration object. See
rowId
for more details.Allan