1

Tengo un problema al intentar guardar el estado de una tabla que cree usando DataTable, el problema es que intento guardar la pagina donde se encuentra mi tabla y que cuando actualice o cambie de pagina y regrese se quede en la misma pagina que deje la tabla, pero al intentar usar saveState o stateSaveCallback no guarda el estado de mi tabla, los datos de mi tabla se cargan mediante una petición AJAX a una base de datos que tengo en mi servidor, este es el codigo:

$.ajax({
            type: "POST",
            url: "controladores/ControladorIngresos.php",
            dataType: "JSON",
            data: {action: "consultaGeneralIngresos", idRolUser: idRolUser.value, idUser: idUser.value},
            cache: false,
            success: function(data){
                //$("#table_ingresos tbody").html(data);
                //console.log(data);       
                
                if ( $.fn.dataTable.isDataTable( '#table_ingresos' ) ) {
                    table = $('#table_ingresos').DataTable({
                        //"serverSide": true,
                        //"ajax": "controladores/ControladorIngresos.php",
                        retrieve: true,
                        data: data,
                        initComplete: function () {
                            // Apply the search
                            this.api().columns().every( function () {
                                var that = this;
                
                                $( 'input', this.footer() ).on( 'keyup change clear', function () {
                                    if ( that.search() !== this.value ) {
                                        that
                                            .search( this.value )
                                            .draw();
                                    }
                                } );
                            } );
                        },
                        "stateSave": true,
                        "stateDuration": 60 * 1
                    });
                    $('#table_ingresos').DataTable().clear();
                    $('#table_ingresos').DataTable().rows.add(data);
                    tabla.draw();

                }
                else {
                    tabla = $('#table_ingresos').DataTable({
                        "order": [[ 0, "desc" ]],
                        retrieve: true,
                        data: data,
                        columns: [
                            { data: "id_ingresoM" },
                            { data: "fecha_aportacion" },
                            { data: "no_recibo" },
                            { data: "estatusTexto" },
                            { data: "empresaTexto" },
                            { data: "conceptoTexto" },
                            { data: "periodo" },
                            { data: "cadena" },
                            { data: "liberado" },
                            { data: "total",
                                render: $.fn.dataTable.render.number(',', '.', 2, '$' )
                             },
                            { data: "botonModificar"},
                            { data: "botonEliminar"}
                        ],
                        language: {
                            "sProcessing": "Procesando...",
                            "sLengthMenu": "Mostrar _MENU_ resultados",
                            "sZeroRecords": "No se encontraron resultados",
                            "sEmptyTable": "Ningún dato disponible en esta tabla",
                            "sInfo": "Mostrando resultados _START_-_END_ de  _TOTAL_",
                            "sInfoEmpty": "Mostrando resultados del 0 al 0 de un total de 0 registros",
                            "sInfoFiltered": "(filtrado de un total de _MAX_ registros)",
                            "sSearch": "Buscar:",
                            "sLoadingRecords": "Cargando...",
                            "oPaginate": {
                             "sFirst": "Primero",
                             "sLast": "Último",
                             "sNext": "Siguiente",
                             "sPrevious": "Anterior"
                            }
                        },
                        "stateSave": true,
                        "stateDuration": 60 * 1
                    });

                    $('#table_ingresos').DataTable().clear();
                    $('#table_ingresos').DataTable().rows.add(data);
                    tabla.draw();

                }
                
            }
        });

He intentado ya con diferentes opciones, intente de agregando estas dos lineas de código:

"stateSave": true, "stateDuration": 60 * 1

pero no me ha funcionado, también he intentando de esta forma, tomando como ejemplo lo que vienen en la documentación de DataTable pero tampoco me ha servido:

$('#example').DataTable( {
    stateSave: true,
    stateLoadCallback: function (settings, callback) {
        $.ajax( {
            url: '/state_load',
            dataType: 'json',
            success: function (json) {
                callback( json );
            }
        } );
    }
} );

2 respuestas 2

1

Creo que además de añadir los parámetros stateSave y stateDurarion, debes añadir los callbacks:

$('#example').dataTable( {
  stateSave: true,
  stateSaveCallback: function(settings,data) {
      localStorage.setItem( 'DataTables_' + settings.sInstance, JSON.stringify(data) )
    },
  stateLoadCallback: function(settings) {
    return JSON.parse( localStorage.getItem( 'DataTables_' + settings.sInstance ) )
    }
} );
2
  • Ya también lo he intentado pero sigue sin funcionar, no entiendo si es algún problema con la forma en la que consulto la información o que puede ser el error el 30 sep. 2021 a las 14:55
  • Ya encontré la solución a mi problema, el problema eran las lineas que finales de mi código especificación estas: $('#table_ingresos').DataTable().clear(); $('#table_ingresos').DataTable().rows.add(data); tabla.draw(); el 30 sep. 2021 a las 15:08
0

Ya encontré el solución a mi problema, removí las ultimas lineas que tenia el código para dibujar la tabla:

$('#table_ingresos').DataTable().clear();
$('#table_ingresos').DataTable().rows.add(data);
tabla.draw();

Y agregue estas lineas:

stateSaveCallback: function(settings,data) {
      console.log(3);
      console.log('DataTables_' + settings.sInstance, JSON.stringify(data));
      localStorage.setItem( 'DataTables_' + settings.sInstance, JSON.stringify(data) )
},
stateLoadCallback: function(settings) {
      console.log(4);
      console.log(JSON.stringify('DataTables_' + settings.sInstance));
      return JSON.parse( localStorage.getItem( 'DataTables_' + settings.sInstance ) )
}

Al final mi codigo quedo de la siguiente forma:

tabla = $('#table_ingresos').DataTable({
                        "order": [[ 0, "desc" ]],
                        retrieve: true,
                        data: data,
                        stateSave: true,
                        stateSaveCallback: function(settings,data) {
                            console.log(3);
                            console.log('DataTables_' + settings.sInstance, JSON.stringify(data));
                            localStorage.setItem( 'DataTables_' + settings.sInstance, JSON.stringify(data) )
                          },
                        stateLoadCallback: function(settings) {
                            console.log(4);
                            console.log(JSON.stringify('DataTables_' + settings.sInstance));
                            return JSON.parse( localStorage.getItem( 'DataTables_' + settings.sInstance ) )
                          },
                        columns: [
                            { data: "id_ingresoM" },
                            { data: "fecha_aportacion" },
                            { data: "no_recibo" },
                            { data: "estatusTexto" },
                            { data: "empresaTexto" },
                            { data: "conceptoTexto" },
                            { data: "periodo" },
                            { data: "cadena" },
                            { data: "liberado" },
                            { data: "total",
                                render: $.fn.dataTable.render.number(',', '.', 2, '$' )
                             },
                            { data: "botonModificar"},
                            { data: "botonEliminar"}
                        ],
                        language: {
                            "sProcessing": "Procesando...",
                            "sLengthMenu": "Mostrar _MENU_ resultados",
                            "sZeroRecords": "No se encontraron resultados",
                            "sEmptyTable": "Ningún dato disponible en esta tabla",
                            "sInfo": "Mostrando resultados _START_-_END_ de  _TOTAL_",
                            "sInfoEmpty": "Mostrando resultados del 0 al 0 de un total de 0 registros",
                            "sInfoFiltered": "(filtrado de un total de _MAX_ registros)",
                            "sSearch": "Buscar:",
                            "sLoadingRecords": "Cargando...",
                            "oPaginate": {
                             "sFirst": "Primero",
                             "sLast": "Último",
                             "sNext": "Siguiente",
                             "sPrevious": "Anterior"
                            }
                        }

Me di cuenta del error porque use un console.log para ver que era lo que estaba recuperando y guardando en el callback de stateSaveCallback y las ultimas 3 lineas del código al parecer me estaba creando y re dibujando la tabla nuevamente porque cuando se ejecutaba por primera vez el código y cambiaba de pagina en la tabla se guardaba de manera local la pagina actual de la tabla y al actualizar la pagina si cargaba lo que se guardo pero lo reescribía por las ultimas 3 lineas.

Tu Respuesta

Al pulsar en “Publica tu respuesta”, muestras tu consentimiento a nuestros términos de servicio, política de privacidad y política de cookies

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.