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

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

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