2

Estou renderizando dinamicamente uma view com a paginação definida e para realizar esta ação eu utilizo a seguinte função:

$('#form').submit(function (e) {
    e.preventDefault();

    const request = $.ajax({
        url: '/module/controller/action',
        method: 'POST',
        data: $(this).serialize()
    });

    request.done(function (data) {
        $('#dynamic_elements').html(data);
    });
});

Eu gostaria que a paginação executasse a mesma função enviando o número da página através do método GET para a mesma controller que é usada para renderização da view via POST.

Segue o exemplo da paginação:

<ul class="pagination">
    <li class="active"><a href="">1</a></li>
    <li><a href="">2</a></li>
    <li><a href="">3</a></li>
</ul>
2
  • Você carrega a página através da submissão de um formulário? Que formulário seria esse e qual a relação dele com a paginação?
    – Woss
    Commented 2/07/2019 às 13:33
  • @AndersonCarlosWoss, É carregada a view após a submissão do formulário. Esse formulário fornece parâmetros que são utilizados para filtrar a query no banco de dados. Como podem existir de 0 a mais de 100K de registros, a minha controller cria a páginação. Commented 2/07/2019 às 13:37

1 Resposta 1

2

Crie um event handler para os links que não estão dentro da <li> com a classe .active, disparando um trigger para o evento .submit do form, passando um parâmetro com o número do botão:

$(".pagination a").on("click", function(e){
   e.preventDefault();
   if(!$(this).parent().hasClass("active")) $('#form').trigger("submit", $(this).text().trim());
});

O if acima irá impedir que o link que estiver dentro da li com a classe .active dispare o trigger. Talvez a página ativa não interessa ser recarregada, mas se quiser que fique habilitada para o clique também, basta remover o if:

$(".pagination a").on("click", function(e){
   e.preventDefault();
   $('#form').trigger("submit", $(this).text().trim());
});

Note que o trigger envia como parâmetro para evento .submit o texto do link, então é preciso colocar na função do evento .submit uma segunda variável para receber essa informação:

$('#form').submit(function (e, v) {
                               ↑

Agora basta concatenar na URL do controller o parâmetro da página que será enviada via GET:

url: '/module/controller/action'+ (v ? '?pagina='+ v : ''),

O operador ternário irá verificar se a variável v tem algum valor e concatenar na URL do controller o parâmetro ?pagina= mais o valor em v (no lugar de pagina você usa o nome que achar melhor).

No controller você irá receber o valor em pagina com $_GET['pagina'];. O formulário em si você irá receber normal com $_POST.


Se os links da paginação estiverem sendo criados na página após o carregamento da mesma, altere o event handler para a forma abaixo (forma delegada):

$(document).on("click", ".pagination a", function(e){
   e.preventDefault();
   $('#form').trigger("submit", $(this).text().trim());
});
7
  • 1
    Excelente resposta, funcionou perfeitamente! Obrigado por disponibilizar o seu tempo para nos ajudar! Commented 2/07/2019 às 14:18
  • Sam, deixa eu te perguntar uma coisa. No caso, essas paginações são renderizadas em um panel do bootstrap. Caso em meu formulário eu selecione mais de um usuário, são renderizados um panel para cada usuário selecionado. Como limitar a requisição da página somente para o panel em que foi clicado? É muito complexo a solução? Commented 2/07/2019 às 14:21
  • Quando tem mais de um panel são feitas mais de uma requisição?
    – Sam
    Commented 2/07/2019 às 14:23
  • Somente a requisição que postei. Na view existe um loop onde crio os painéis para cada usuário selecionado. O ideal seria uma request para cada um? Commented 2/07/2019 às 14:24
  • Cara, não consegui visualizar a questão. Quando clicar na paginação atualizar apenas o panel onde foi clicado o número da página?
    – Sam
    Commented 2/07/2019 às 14:26

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .