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?
This discussion has been closed.
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