ajax.reload(null, false) jumps to the first page

DanyVit90 · November 2020

Hi to everybody,
I'm using datatables without serverSide processing.
It works all fine, but when I make some CRUD operations and I will perform ajax.reload using the correct parameters (null, false) datatables jumps to the firstpage.
If I can ,with filtering, to have only 1 page, also with 100 rows and I scroll to the middle of the table, It remain on the exact point where I was before reload, but If I start form page 2 or 3 etc...it will return to the first page.

What could be the problem?

kthorngren · November 2020

ajax.reload(null, false) works here:
http://live.datatables.net/lohiline/1/edit

Are you using draw() anywhere in that code flow?

Have you used the browser's network inspector tool to monitor the XHR request and response to make sure its as expected?

Can you post a link to your page or a test case replicating the issue so we can help debug?
https://datatables.net/manual/tech-notes/10#How-to-provide-a-test-case

Kevin

DanyVit90 · November 2020

I don't know how to insert php page where is sent ajax call in thoose sites.

Here it's my datatables code flow:

 $(document).ready(function () {
            var option, get;
            
            option = 4;

            var table = $('#table').DataTable({
                orderClasses: false,
                order: [[8, 'asc']],
                pageLength: 10,
                stateSave: true,
                ajax:{
                    "url": "crud.php",
                    "method": 'POST',
                    "data": function (d){
                           return $.extend( {}, d, {
                            option:option,
                            get:get,
                            startDateEmiss:$.trim($('#startDateEmiss').val()),
                            endDateEmiss:$.trim($('#endDateEmiss').val()),
                            startDateScad:$.trim($('#startDateScad').val()),
                            endDateScad:$.trim($('#endDateScad').val()),
                            startDateEsec:$.trim($('#startDateEsec').val()),
                            endDateEsec:$.trim($('#endDateEsec').val())
                           } );
                               },
                    "dataSrc":""
                },


                columns:[
                    {"data": "soprannomeAzienda"},
                    {"data": "categoriaDoc"},
                    {"data": "tipoAdd"},
                    {"data": "dataEmisDoc"},
                    {"data": "contoAdd"},
                    {"data": "nrDoc"},
                    {"data": "idDocAdd"},
                    {"data": "descrDocAdd"},
                    {"data": "dataScadAdd"},
                    {"data": "importoScadAdd"},
                    {"data": "sommaComp"},
                    {"data": "impEff"},
                    {"data": "dataEsecAdd"},
                    {"data": "nomeModalitaScad"},
                    {"data": "noteScadAdd"},
                    {"data": "idScadAdd"},
                    {"data": "countAllDoc"},
                    {"data": "countAllScad"},
                    {"data": "isScad"},
                    {"data": "isEsec"},
                    {"data": "ragSoc"},
                ],
                responsive: {
                     details: {
                         display: $.fn.dataTable.Responsive.display.modal({
                             header: function (row) {
                                 var data = row.data();
                                 return 'Azienda ' + data.ragSoc + ' documento nr ' + data.nrDoc + ' del ' + moment(data.dataEmisDoc).format('DD/MM/YYYY') ;
                             }
                         }),
                         renderer: $.fn.dataTable.Responsive.renderer.tableAll({
                             tableClass: 'table'
                         })
                     }
                 },
                 searchPanes: {},
                columnDefs: [
                    {
                        render: function (data, type, row){
                            <?php if(isset($_GET['eseguiti'])) {?>
                            var phpGet = "&&fromeseguiti";
                            <?php }?>
                            <?php if(isset($_GET['nonapprovati'])) {?>
                            var phpGet = "&&fromnonapprovati";
                            <?php }?>
                            <?php if(isset($_GET['noneseguiti'])) {?>
                            var phpGet = "&&fromnoneseguiti";
                            <?php }?>
                            <?php if(isset($_GET['tuttiapprovati'])) {?>
                            var phpGet = "&&fromtuttiapprovati";
                            <?php }?>
                            if(row.countAllDoc > 0){
                                return "<div class='text-center'><div class='btn-group'><div class='btn-group'><button type='button' class='btn btn-outline-warning btn-sm border-0'onclick='location.href=\"edit_scad_add.php?id_doc=" + data + phpGet +"\"'> <i class='material-icons'>edit</i></button><button class='btn border-0 btn-outline-primary btn-sm btnAllDoc align-middle' id='" + data + "' >" + row.countAllDoc + "<i class='material-icons'>attach_file</i></button></div></div> ";
                            }else{
                                return "<div class='text-center'><div class='btn-group'><button type='button' class='btn btn-outline-warning btn-sm border-0'onclick='location.href=\"edit_scad_add.php?id_doc=" + data + phpGet +"\"'> <i class='material-icons'>edit</i></button></div></div>";
                                }
                        },
                        targets: 6
                    },
                    {
                        render: function (data, type, row){
                            if(row.countAllScad > 0){
                            return "<div class='text-center'><div class='btn-group'><button class='btn border-0 btn-outline-warning btn-sm btnEditar' id='" + data + "' ><i class='material-icons'>edit</i></button><button class='btn border-0 btn-outline-primary btn-sm btnAllScad' id='" + data + "' ><span class='font-weight-bold'>" + row.countAllScad + "</span><i class='material-icons'>attach_file</i></button></div></div> ";
                            }else{
                                return "<div class='text-center'><div class='btn-group'><button class='btn border-0 btn-outline-warning btn-sm btnEditar' id='" + data + "' ><i class='material-icons'>edit</i></button><button class='btn border-0 btn-outline-primary btn-sm btnAllScad' id='" + data + "' ><span class='font-weight-bold'>+</span><i class='material-icons'>attach_file</i></button></div></div> ";
                            }
                        },

                        targets: 15
                    },
                    {
                        render: function (data, type, row){
                                return "<div class='dataTableDiv' data-toggle='tooltip' data-placement='top' title='" + row.ragSoc+"' >" + data + "</div> ";

                        },

                        targets: 0
                    },
                    {
                        targets: [ 16, 17, 18, 19, 20 ],
                        visible: false
                    },
                    {
                        searchPanes: {
                            show: true,
                        },
                        targets: [0, 1, 2, 4, 5, 9, 11, 13],
                    },
                    {
                        searchPanes: {
                            show: false,
                        },
                        targets: [3, 6, 7, 10, 12, 14, 15, 16, 17, 18, 19, 20],
                    },
                    {
                        render: $.fn.dataTable.render.number('.', ',', 2, '€ '),
                        targets: [9, 10, 11],

                    },
                    {
                        targets: [3, 8, 12],
                        render: $.fn.dataTable.render.moment('DD/MM/YYYY')
                    },
                    { className: "dtBoldCol", "targets": [ 0, 8, 11, 12, 6 ] },
                    { className: 'never',
                      targets: [16, 17, 18, 19, 20]
                    },
                ],
                processing: true,
                "language": {
                    "decimal": ",",
                    "thousands": ".",
                    "emptyTable": "Nessun dato disponibile",
                    "info": "Stai visualizzando dal _START_° al _END_° risultato su _TOTAL_ totali",
                    "infoEmpty": "Stai visualizzando 0 di 0 risultati su 0 totali",
                    "infoFiltered": "(trovati _MAX_ totali)",
                    "infoPostFix": "",
                    "thousands": ",",
                    "lengthMenu": "Visualizza _MENU_ risultati per pagina",
                    "loadingRecords": '',
                    "processing": '<div class="spinner-border text-primary backround-light" role="status"></div><span class="font-weight-bold text-primary">  Caricamento...</span>',
                    "search": "Cerca in tutti i campi:",
                    "zeroRecords": "Nessun risultato disponibile",
                    "paginate": {
                        "first": "Vai alla prima",
                        "last": "Vai all'ultima",
                        "next": "Successiva",
                        "previous": "Precedente"
                    },
                    "aria": {
                        "sortAscending": ": activate to sort column ascending",
                        "sortDescending": ": activate to sort column descending"
                    },
                   searchPanes: {
                        count: '{total} trovati',
                        countFiltered: '{shown} / {total}',
                        clearMessage: 'Togli tutti i filtri',
                        title: {
                            _: '%d - filtri applicati',
                            0: '0 - filtri applicati',
                            1: '1 - filtro applicato',
                        }
                    },
                },

It continues, but i can't post a second comment....

colin · November 2020

As Kevin said, we're happy to take a look, but as per the forum rules, please link to a test case - a test case that replicates the issue will ensure you'll get a quick and accurate response. Information on how to create a test case (if you aren't able to link to the page you are working on) is available here.

Cheers,

Colin

DanyVit90 · November 2020

dom: "<'row'<'col-sm-12'P>>" +
"<'row'<'col-sm-6'l><'col-sm-6'f>>" +
"<'row'<'col-sm-12'tr>>" +
"<'row'<'col-sm-5'i><'col-sm-7'p>>" +
"<'row mb-5'<'col-sm-12'>>",

           buttons: [
                {
                    extend: 'excelHtml5',
                    autofilter: true,
                    name: "ExcelAllButton",
                    text: 'ESPORTA TUTTI I RISULTATI IN EXCEL',
                    exportOptions: {
                        modifier: {
                            page: 'all',
                        },
                        columns: [0, 1, 2, 3, 4, 5, 7, 8, 9, 10, 11, 12, 13, 14]
                    }
                },
                {
                    extend: 'pdf',
                    footer: true,
                    customize:
                        function (doc) {
                            doc.defaultStyle.fontSize = 6;
                            doc.styles.tableHeader.fontSize = 5;
                            doc.styles.tableFooter.fontSize = 7;
                            doc.content[1].table.widths = ['6%', '5%', '5%', '6%', '5%',
                                '5%', '22%', '5%', '7%',
                                '7%', '7%', '6%', '6%',
                                '7%'];
                            doc.styles.tableBodyEven.alignment = 'center';
                            doc.styles.tableBodyOdd.alignment = 'center';
                            doc.styles.tableFooter.alignment = 'center';
                        },
                    text: 'Save current page',
                    name: "PDFButton",
                    exportOptions: {
                        modifier: {
                            page: 'all'
                        },
                        columns: [0, 1, 2, 3, 4, 5, 7, 8, 9, 10, 11, 12, 13, 14]
                    },
                    orientation: 'landscape',
                    download: 'download',
                }

            ],
            rowCallback: function (row, data, dataIndex) {
                    $(row).addClass('trdataTabel');
                if( data.isScad == '1' ){
                    $(row).addClass('scadScad');
                }
                if( data.isEsec == '1' ){
                    $(row).addClass('scadEseg');
                }
                },

            footerCallback: function (row, data, start, end, display) {
                var api = this.api(), data;

                // Rimuove la formattazione di valuta per poter avere numeri semplici con cui fare le somme
                var intVal = function (i) {
                    return typeof i === 'string' ?
                        i.replace(/[\€,]/g, '') * 1 :
                        typeof i === 'number' ?
                            i : 0;
                };

                // Totali di tutti i risultati
                /*var totalScad = api
                    .column( 9 )
                    .data()
                    .reduce( function (a, b) {
                        return intVal(a) + intVal(b);
                    }, 0 );

                var totalComp = api
                    .column( 10 )
                    .data()
                    .reduce( function (a, b) {
                        return intVal(a) + intVal(b);
                    }, 0 );

                var totalEff = api
                    .column( 11 )
                    .data()
                    .reduce( function (a, b) {
                        return intVal(a) + intVal(b);
                    }, 0 );*/

               // Totali dei risultati della pagina corrente
                var pageTotalScad = api
                    .column(9, {page: 'current'})
                    .data()
                    .reduce(function (a, b) {
                        return intVal(a) + intVal(b);
                    }, 0);

                var pageTotalComp = api
                    .column(10, {page: 'current'})
                    .data()
                    .reduce(function (a, b) {
                        return intVal(a) + intVal(b);
                    }, 0);

                var pageTotalEff = api
                    .column(11, {page: 'current'})
                    .data()
                    .reduce(function (a, b) {
                        return intVal(a) + intVal(b);
                    }, 0);

                // Aggiorna i valori visualizzati nel footer
                var numFormat = $.fn.dataTable.render.number('.', ',', 2, '€ ').display;
                $(api.column(9).footer()).html(
                    numFormat(pageTotalScad)// + ' || Complessivi: ' + numFormat(totalScad)
                );

                $(api.column(10).footer()).html(
                    numFormat(pageTotalComp)// + ' || Complessivi: ' + numFormat(totalComp)
                );

                $(api.column(11).footer()).html(
                    numFormat(pageTotalEff) //+ ' || Complessivi: ' + numFormat(totalEff)
                );
            }


        });

       new $.fn.dataTable.SearchPanes(table, {});
        table.searchPanes.container().insertAfter('#spButton').addClass('collapse').attr("id", "spCont");
        new $.fn.dataTable.FixedHeader(table);

        $('#editScad').submit(function(event){
            event.preventDefault(); //evita il normale comportamento del submit, cioè ricaricare la pagina
            var edit_id_scad_scad, edit_id_doc_scad, edit_data_scad_add, edit_esec_scad_add, edit_modalita_scad_add, edit_imp_scad_add, edit_note_scad_add, option, get;
            option = 1;
            <?php
            if (isset($_GET['eseguiti'])) {
            ?>
            get = "eseguiti";
            <?php } ?>
            <?php
            if (isset($_GET['noneseguiti'])) {
            ?>
            get = "noneseguiti";
            <?php } ?>
            <?php
            if (isset($_GET['nonapprovati'])) {
            ?>
            get = "nonapprovati";
            <?php } ?>
            <?php
            if (isset($_GET['tuttiapprovati'])) {
            ?>
            get = "tuttiapprovati";
            <?php } ?>
            edit_id_scad_scad = $.trim($('#edit_id_scad_scad').val());
            edit_id_doc_scad = $.trim($('#edit_id_doc_scad').val());
            edit_data_scad_add = $.trim($('#edit_data_scad_add').val());
            edit_esec_scad_add = $.trim($('#edit_esec_scad_add').val());
            edit_modalita_scad_add = $.trim($('#edit_modalita_scad_add').val());
            edit_imp_scad_add = $.trim($('#edit_imp_scad_add').val());
            edit_note_scad_add = $.trim($('#edit_note_scad_add').val());
            $.ajax({
                url: "crud.php",
                type: "POST",
                datatype:"json",
                data:  {edit_id_scad_scad:edit_id_scad_scad, edit_id_doc_scad:edit_id_doc_scad, edit_data_scad_add:edit_data_scad_add, edit_esec_scad_add:edit_esec_scad_add, edit_modalita_scad_add:edit_modalita_scad_add, edit_imp_scad_add:edit_imp_scad_add ,edit_note_scad_add:edit_note_scad_add, option:option, get:get},
                success: function() {
                    table.ajax.reload(null, false);
                }
            });
            $('#editScad').modal('hide');
        });

        $( "#daterange" ).click(function(event) {
            event.preventDefault();
            table.ajax.reload(null, false);
        });

        $( "#nodateRange" ).click(function(event) {
            event.preventDefault();
                $('#startDateEmiss').val('');
                $('#endDateEmiss').val('');
                $('#startDateScad').val('');
                $('#endDateScad').val('');
                $('#startDateEsec').val('');
                $('#endDateEsec').val('')
            table.ajax.reload(null, false);
        });



    });

tangerine · November 2020

Please re-read Colin's post.

DanyVit90 · November 2020

This is the webpage that replicate the issue:
https://www.webscad.altervista.org/addebiti_ajax2.php?tuttiapprovati

TO LOGIN
email: info@guest.com
pssw: D@t@T4b!

I add a button to the bottom of the table that perform ajax.reload(null, false) so you can test it.

Thanks

kthorngren · November 2020

I tried logging in but get this error:

The email or password entered is incorrect

Kevin

DanyVit90 · November 2020

Try again, I fixed the problem.
Sorry for the inconvenience!

kthorngren · November 2020

Got it thanks. I just realized that you are using SearchPanes and this same issue was reported in October. See this thread. The issue is seen in SP 1.2.1 which is the latest version. You can use the nightly build as described in the thread or wait for the next release.

Kevin

DanyVit90 · November 2020

Perfect! It works!

Really Thanks

ajax.reload(null, false) jumps to the first page

ajax.reload(null, false) jumps to the first page

Answers

Howdy, Stranger!

Categories

DataTables

ajax.reload(null, false) jumps to the first page

ajax.reload(null, false) jumps to the first page

Answers

Howdy, Stranger!

Quick Links

Categories

DataTables