when the pager changes, it loses the selection

when the pager changes, it loses the selection

Maxilboss93Maxilboss93 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

  • allanallan Posts: 63,522Questions: 1Answers: 10,473 Site admin

    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

  • Maxilboss93Maxilboss93 Posts: 33Questions: 6Answers: 0

    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

  • allanallan Posts: 63,522Questions: 1Answers: 10,473 Site admin

    Is __rank the primary key (or otherwise unique value)? If so, add:

    rowId: '__rank'
    

    do your DataTables configuration object. See rowId for more details.

    Allan

Sign In or Register to comment.