DataTables guardar dados da &uacute;ltima consulta [RESOLVIDO]

14. Re: DataTables guardar dados da última consulta [RESOLVIDO]

SamL
(usa XUbuntu)

Enviado em 12/07/2023 - 12:30h

Veja com esse código se funciona.
Como não tenho como testar diretamente, fica ai pra vc mesmo testar.
Corrigi alguns erros de lógica, mas é bom que vc apague o cache o cookies do navegador, aperte control+shift+delete.
Isso fará com que os dados anteriores sejam deletados, o que pode ajudar na nova lógica do código abaixo.
Depois retorne ai caso tenha tido algum resultado.

<script>

        //agora tabela é global

        var tabela = undefined;

        $(document).ready(function() {

            

            

            function initEvents() {

              if (!tabela) {

                console.error("Tabela eh indefinida");

                return;

              }



              tabela.on('draw', function() {

                tabela.state.save();

              });



              tabela.on('search.dt', function() {

                  tabela.state.save();

              });



              tabela.on('length.dt', function() {

                  tabela.state.save();

              });



              tabela.on('order.dt', function() {

                  tabela.state.save();

              });



              tabela.on('page.dt', function() {

                  tabela.state.save();

              });



              tabela.on('processing.dt', function() {

                  tabela.state.save();

              });



              tabela.on('destroy', function() {

                  //removido

                  //localStorage.removeItem('estadoDaTabela');

              });

            }



            function initDataTable() {

                var estadoDaTabela = JSON.parse(localStorage.getItem('estadoDaTabela'));

                if (estadoDaTabela && estadoDaTabela.pesquisa) {

                    $('#cotanum').val(estadoDaTabela.pesquisa.cotanum);

                    $('#cnpj').val(estadoDaTabela.pesquisa.cnpj);



                    $.ajax({

                        url: 'buscaItensCotacao.php',

                        type: 'POST',

                        data: $('#form-pesquisa').serialize(),

                        success: function(response) {

                            $('#resultado-pesquisa').html(response);

                            if ($.fn.DataTable.isDataTable('#resultado-pesquisa table')) {

                                tabela.destroy();

                            }

                            tabela = $('#resultado-pesquisa table').DataTable({

                                //ativa para salvar o state por padrão

                                stateSave: true,

                                stateSaveParams: function (settings, data) {

                                  localStorage.setItem('estadoDaTabela', JSON.stringify(data));

                                },

                                stateLoadParams: function (settings) {

                                    var data = localStorage.getItem('estadoDaTabela');

                                    return JSON.parse(data);

                                },

                                language: {

                                    url: 'inc/datatables/pt-BR.json'

                                },

                                paging: true

                            });

                          

                          //inicializa os eventos

                          initEvents();

                        }

                    });

                }

                else {

                    tabela = $('#resultado-pesquisa table').DataTable({

                      //ativa para salvar o state por padrão

                      stateSave: true,

                      //cria os callbaks de save e load

                      stateSaveParams: function (settings, data) {

                        localStorage.setItem('estadoDaTabela', JSON.stringify(data));

                      },

                      stateLoadParams: function (settings) {

                          var data = localStorage.getItem('estadoDaTabela');

                          return JSON.parse(data);

                      },

                      language: {

                          url: 'inc/datatables/pt-BR.json'

                      },

                      paging: true

                    });



                    //inicializa os eventos

                    initEvents();

                }

            }



            initDataTable();



            $('#form-pesquisa').submit(function(event) {

                event.preventDefault();

                //salva a tabela atual

                tabela.state.save();

                $.ajax({

                    url: 'buscaItensCotacao.php',

                    type: 'POST',

                    data: $(this).serialize(),

                    success: function(response) {

                        $('#resultado-pesquisa').html(response);

                        if ($.fn.DataTable.isDataTable('#resultado-pesquisa table')) {

                          //destroi a tabela anterior

                          tabela.destroy();

                        }

                      

                        //reinicia a tabela com os dados atuais

                        tabela = $('#resultado-pesquisa table').DataTable({

                          //ativa para salvar o state por padrão

                          stateSave: true,

                          stateSaveParams: function (settings, data) {

                            localStorage.setItem('estadoDaTabela', JSON.stringify(data));

                          },

                          stateLoadParams: function (settings) {

                              var data = localStorage.getItem('estadoDaTabela');

                              return JSON.parse(data);

                          },

                          language: {

                              url: 'inc/datatables/pt-BR.json'

                          },

                          paging: true

                        });

    

                        //inicializa os eventos

                        initEvents();



                        //salva a tabela atual atualizada

                        tabela.state.save();

                    }

                });

            });

        });

</script>

https://nerdki.blogspot.com/ acessa ai, é grátis
Não gostou? O ícone da casinha é serventia do site!

15. Re: DataTables guardar dados da última consulta [RESOLVIDO]

Emilio Araujo
(usa Debian)

Enviado em 12/07/2023 - 15:40h

SamL escreveu:

Veja com esse código se funciona.
Como não tenho como testar diretamente, fica ai pra vc mesmo testar.
Corrigi alguns erros de lógica, mas é bom que vc apague o cache o cookies do navegador, aperte control+shift+delete.
Isso fará com que os dados anteriores sejam deletados, o que pode ajudar na nova lógica do código abaixo.
Depois retorne ai caso tenha tido algum resultado.

<script>

        //agora tabela é global

        var tabela = undefined;

        $(document).ready(function() {

            

            

            function initEvents() {

              if (!tabela) {

                console.error("Tabela eh indefinida");

                return;

              }



              tabela.on('draw', function() {

                tabela.state.save();

              });



              tabela.on('search.dt', function() {

                  tabela.state.save();

              });



              tabela.on('length.dt', function() {

                  tabela.state.save();

              });



              tabela.on('order.dt', function() {

                  tabela.state.save();

              });



              tabela.on('page.dt', function() {

                  tabela.state.save();

              });



              tabela.on('processing.dt', function() {

                  tabela.state.save();

              });



              tabela.on('destroy', function() {

                  //removido

                  //localStorage.removeItem('estadoDaTabela');

              });

            }



            function initDataTable() {

                var estadoDaTabela = JSON.parse(localStorage.getItem('estadoDaTabela'));

                if (estadoDaTabela && estadoDaTabela.pesquisa) {

                    $('#cotanum').val(estadoDaTabela.pesquisa.cotanum);

                    $('#cnpj').val(estadoDaTabela.pesquisa.cnpj);



                    $.ajax({

                        url: 'buscaItensCotacao.php',

                        type: 'POST',

                        data: $('#form-pesquisa').serialize(),

                        success: function(response) {

                            $('#resultado-pesquisa').html(response);

                            if ($.fn.DataTable.isDataTable('#resultado-pesquisa table')) {

                                tabela.destroy();

                            }

                            tabela = $('#resultado-pesquisa table').DataTable({

                                //ativa para salvar o state por padrão

                                stateSave: true,

                                stateSaveParams: function (settings, data) {

                                  localStorage.setItem('estadoDaTabela', JSON.stringify(data));

                                },

                                stateLoadParams: function (settings) {

                                    var data = localStorage.getItem('estadoDaTabela');

                                    return JSON.parse(data);

                                },

                                language: {

                                    url: 'inc/datatables/pt-BR.json'

                                },

                                paging: true

                            });

                          

                          //inicializa os eventos

                          initEvents();

                        }

                    });

                }

                else {

                    tabela = $('#resultado-pesquisa table').DataTable({

                      //ativa para salvar o state por padrão

                      stateSave: true,

                      //cria os callbaks de save e load

                      stateSaveParams: function (settings, data) {

                        localStorage.setItem('estadoDaTabela', JSON.stringify(data));

                      },

                      stateLoadParams: function (settings) {

                          var data = localStorage.getItem('estadoDaTabela');

                          return JSON.parse(data);

                      },

                      language: {

                          url: 'inc/datatables/pt-BR.json'

                      },

                      paging: true

                    });



                    //inicializa os eventos

                    initEvents();

                }

            }



            initDataTable();



            $('#form-pesquisa').submit(function(event) {

                event.preventDefault();

                //salva a tabela atual

                tabela.state.save();

                $.ajax({

                    url: 'buscaItensCotacao.php',

                    type: 'POST',

                    data: $(this).serialize(),

                    success: function(response) {

                        $('#resultado-pesquisa').html(response);

                        if ($.fn.DataTable.isDataTable('#resultado-pesquisa table')) {

                          //destroi a tabela anterior

                          tabela.destroy();

                        }

                      

                        //reinicia a tabela com os dados atuais

                        tabela = $('#resultado-pesquisa table').DataTable({

                          //ativa para salvar o state por padrão

                          stateSave: true,

                          stateSaveParams: function (settings, data) {

                            localStorage.setItem('estadoDaTabela', JSON.stringify(data));

                          },

                          stateLoadParams: function (settings) {

                              var data = localStorage.getItem('estadoDaTabela');

                              return JSON.parse(data);

                          },

                          language: {

                              url: 'inc/datatables/pt-BR.json'

                          },

                          paging: true

                        });

    

                        //inicializa os eventos

                        initEvents();



                        //salva a tabela atual atualizada

                        tabela.state.save();

                    }

                });

            });

        });

</script>

https://nerdki.blogspot.com/ acessa ai, é grátis
Não gostou? O ícone da casinha é serventia do site!

Fiz como orientou, deletando os biscoitos e atualizando o script, mas agora não salva nem o estado da primeira consulta. mas está retornando dados quando faço a pesquisa.

e como um adicional, acessei https://datatables.net/download/ e baixei para bootstrap 5 (que é o que estou usando no projeto), e agora veio o jquery 3.7, mas nada mudou.

16. Re: DataTables guardar dados da última consulta [RESOLVIDO]

SamL
(usa XUbuntu)

Enviado em 12/07/2023 - 17:04h

só avisando caso não tenha visto o email.
eu to sem poder digitar código porque meu teclado quebrou os shifts, então, não posso digitar simbolos como chaves.

outro dia eu passo aqui.

até depois..

https://nerdki.blogspot.com/ acessa ai, é grátis
Não gostou? O ícone da casinha é serventia do site!

17. Re: DataTables guardar dados da última consulta [RESOLVIDO]

SamL
(usa XUbuntu)

Enviado em 13/07/2023 - 19:57h

Emilio Araujo escreveu:

Fiz como orientou, deletando os biscoitos e atualizando o script, mas agora não salva nem o estado da primeira consulta. mas está retornando dados quando faço a pesquisa.

e como um adicional, acessei https://datatables.net/download/ e baixei para bootstrap 5 (que é o que estou usando no projeto), e agora veio o jquery 3.7, mas nada mudou.

Voltando. Certo, já vemos um progresso.
Acho que se eu pudesse testar aqui no meu pc seria mais fácil de eu ajudar do que eu criar código as cegas.
Tem como tu me arrumar uma parte isolada do sistema?
Tipo, um json com dados + parte do código da pesquisa?
Se sim, então eu posso testar aqui e trabalhar em cima do problema de forma mais rápida.

Qualquer coisa fala ai.

Até mais.

https://nerdki.blogspot.com/ acessa ai, é grátis
Não gostou? O ícone da casinha é serventia do site!

18. Re: DataTables guardar dados da última consulta [RESOLVIDO]

Emilio Araujo
(usa Debian)

Enviado em 14/07/2023 - 07:55h

SamL escreveu:

Vou mandar uma parte do código por e-mail, e vamos postando o progresso por aqui pra deixar o registo pra comunidade, e mais uma vez, obrigado pela disposição!

19. Re: DataTables guardar dados da última consulta [RESOLVIDO]

Emilio Araujo
(usa Debian)

Enviado em 14/07/2023 - 15:15h

Emilio Araujo escreveu:

SamL escreveu:

Vou mandar uma parte do código por e-mail, e vamos postando o progresso por aqui pra deixar o registo pra comunidade, e mais uma vez, obrigado pela disposição!

Updating...

Dando uma lida na documentação do datatables, eu refiz as referências aos arquivos: jquery.dataTables.min.css, jquery.dataTables.min.js e jquery-3.7.0.min.js.

agora, mesmo eu atualizando e mudando os dados das pesquisas, quando volto aquela primeira, o status é mantido, incuindo paginação.

Só falta agora, algo pra manter a tabela com o resultado da ultima pesquisa, mesmo se atualizar a pagina. Estou pesquisando que é possível gravar os dados na $_SESSION do PHP, mas ainda estou trabalhando nisso.

20. Re: DataTables guardar dados da última consulta [RESOLVIDO]

SamL
(usa XUbuntu)

Enviado em 14/07/2023 - 17:37h

Emilio Araujo escreveu:

Updating...

Dando uma lida na documentação do datatables, eu refiz as referências aos arquivos: jquery.dataTables.min.css, jquery.dataTables.min.js e jquery-3.7.0.min.js.

agora, mesmo eu atualizando e mudando os dados das pesquisas, quando volto aquela primeira, o status é mantido, incuindo paginação.

Só falta agora, algo pra manter a tabela com o resultado da ultima pesquisa, mesmo se atualizar a pagina. Estou pesquisando que é possível gravar os dados na $_SESSION do PHP, mas ainda estou trabalhando nisso.

Passei uma boa parte da tarde vendo sobre essa falta de salvar o estado.
O que posso concluir dos testes que fiz é:
1-no firefox e chrome o DataTables não restaura de forma nenhuma os dados
2-deve ser bug do DataTables, já que no save nenhuma coluna está de fato dentro do json.
A não ser é claro que devemos transformar os dados de forma manual, o que seria inútil o uso de datatables pra ter uma maior facilidade de lidar com tabelas.

Enfim, acho que só salvando os dados no servidor, assim como vc mesmo disse. Mas é estranho o datatables não salvar nenhuma coluna ou linha da tabela no json que é salvo sim no estadoDaTabela.

https://nerdki.blogspot.com/ acessa ai, é grátis
Não gostou? O ícone da casinha é serventia do site!

21. DataTables guardar dados da última consulta Resolvido!!!

Emilio Araujo
(usa Debian)

Enviado em 17/07/2023 - 17:45h

Meu amigo SamL, após tentativas e erros, e suas dicas que me fizeram reorganizar o código, e também uma leitura nos fórum da dataTables, cheguei ao código que me rendeu o resultado esperado:

<script>

var tabela = undefined;



$(document).ready(function() {

  function initEvents() {

    if (!tabela) {

      console.error("Tabela é indefinida");

      return;

    }



    tabela.on('draw', function() {

      tabela.state.save();

    });



    tabela.on('search.dt', function() {

      tabela.state.save();

    });



    tabela.on('length.dt', function() {

      tabela.state.save();

    });



    tabela.on('order.dt', function() {

      tabela.state.save();

    });



    tabela.on('page.dt', function() {

      tabela.state.save();

    });



    tabela.on('processing.dt', function() {

      tabela.state.save();

    });



    tabela.on('destroy', function() {

      localStorage.removeItem('estadoDaTabela');

    });

  }



  function initDataTable() {

    var estadoDaTabela = JSON.parse(localStorage.getItem('estadoDaTabela'));

    if (estadoDaTabela && estadoDaTabela.pesquisa) {

      $('#cotanum').val(estadoDaTabela.pesquisa.cotanum);

      $('#cnpj').val(estadoDaTabela.pesquisa.cnpj);

    }



    tabela = $('#resultado-pesquisa table').DataTable({

      stateSave: true,

      stateSaveParams: function(settings, data) {

        data.pesquisa = {

          cotanum: $('#cotanum').val(),

          cnpj: $('#cnpj').val()

        };

        localStorage.setItem('estadoDaTabela', JSON.stringify(data));

      },

      stateLoadParams: function(settings, data) {

        var estadoDaTabela = JSON.parse(localStorage.getItem('estadoDaTabela'));

        if (estadoDaTabela && estadoDaTabela.pesquisa) {

          $('#cotanum').val(estadoDaTabela.pesquisa.cotanum);

          $('#cnpj').val(estadoDaTabela.pesquisa.cnpj);

        }

        return estadoDaTabela;

      },

      language: {

        url: 'inc/datatables/pt-BR.json'

      },

      paging: true

    });



    initEvents();

  }



  initDataTable();



  // Verificar se os campos do formulário estão preenchidos

  var cotanum = $('#cotanum').val();

  var cnpj = $('#cnpj').val();

  if (cotanum !== '' && cnpj !== '') {

    setTimeout(function() {

      $('#form-pesquisa').trigger('submit'); // Submeter o formulário com um pequeno atraso

    }, 100);

  }



  $('#form-pesquisa').submit(function(event) {

    event.preventDefault();

    tabela.state.save();

    $.ajax({

      url: 'buscaItensCotacao.php',

      type: 'POST',

      data: $(this).serialize(),

      success: function(response) {

        $('#resultado-pesquisa').html(response);

        if ($.fn.DataTable.isDataTable('#resultado-pesquisa table')) {

          tabela.destroy();

        }

        initDataTable();

        tabela.state.save();

      }

    });

  });

});

</script>

Dês de já, minha gratidão pela ajuda com o código e a disposição de ajudar, continue assim, Obrigado!!!

22. Re: DataTables guardar dados da última consulta [RESOLVIDO]

SamL
(usa XUbuntu)

Enviado em 17/07/2023 - 18:01h

Emilio Araujo escreveu:

Meu amigo SamL, após tentativas e erros, e suas dicas que me fizeram reorganizar o código, e também uma leitura nos fórum da dataTables, cheguei ao código que me rendeu o resultado esperado:
Dês de já, minha gratidão pela ajuda com o código e a disposição de ajudar, continue assim, Obrigado!!!

Caramba, então, tinha que salvar os dados manualmente!
Nossa, e eu achei que o DataTables salvava de forma automática.
Isso que dá acreditar fielmente numa coisa como verdadeira e no fim era falso hahaha

E que bom que resolveu.

https://nerdki.blogspot.com/ acessa ai, é grátis
Não gostou? O ícone da casinha é serventia do site!