2

Criei uma api RestFull no Laravel. No projeto tenho o javascript e o html em uma pasta que chama a API. Logo criei uma paginação no próprio laravel que chamei no meu próprio projeto em javascript.

No entanto, preciso resolver o problema da paginação quando muda de página. Ao clicar na próxima página ele vai para a próxima mas perde as configurações do HTML e CSS. Eu queria que não perdesse estas configurações.

Tenho no arquivo cadastro_clientes.php o código em javascript:

Código que chama a API do LARAVEL:

 // retorna os clientes cadastrados
 function retorna_cliente()
 {

$.ajax({
  url: url_base + "clientes?qtd=4&page=1",
  type: 'GET',
  dataType: 'json',
  success: function (data)
  {
    if (data == 0)
    {
      $('.cliente-error-registro').css('display','block');
      $('.cliente-error-registro .mensagem-erro').html(mensagem_cliente);
    }
    else
    {
      itemHTML += "<table id='datatable-checkbox' class='table table-striped table-bordered bulk_action dataTable no-footer' role='grid' aria-describedby='datatable-checkbox_info'>";
      itemHTML += "<thead>";
      itemHTML += "<tr>";
      itemHTML += "<th>";
      itemHTML += "<th><input type='checkbox' id='check-all' class='flat'></th>";
      itemHTML += "</th>";
      itemHTML += "<th>Nome</th>";
      itemHTML += "<th>Telefone</th>";
      itemHTML += "<th>Cpf / Cnpj</th>";
      itemHTML += "<th>Endereço</th>";
      itemHTML += "<th>Email</th>";
      itemHTML += "<th>Cliente</th>";
      itemHTML += "</tr>";
      itemHTML += "</thead>";

      $.each(data, function(key,item) {

        let current_page = item.current_page;
        let last_page = item.last_page;
        let next_page_url = item.next_page_url;
        let prev_page_url = item.prev_page_url;
        let clientes = item.data;

        if (next_page_url == null)
        {
          $('.actionBar').html("<a href='' title='Próxima Página' class='buttonNext btn btn-success' style='display:none;'>Próxima Página >></a><a href='" + prev_page_url + "' title='Pàgina Anterior' class='buttonPrevious btn btn-primary' style='display: block;'><< Página Anterior</a>");
        }
        else
        {
          $('.actionBar').html("<a href='" + next_page_url + "' title='Próxima Página' class='buttonNext btn btn-success'>Próxima Página >></a><a href='' title='Pàgina Anterior' class='buttonPrevious btn btn-primary' style='display: none;'><< Página Anterior</a>");
        }

        for (var i in clientes) {

           id_cliente = clientes[i].id;
           nome_cliente = clientes[i].nome;
           telefone_cliente = clientes[i].telefone;
           cpf_cliente = clientes[i].cpf;
           cnpj_cliente = clientes[i].cnpj;
           endereco_cliente = clientes[i].endereco;
           email_cliente = clientes[i].email;
           cliente = clientes[i].cliente;

           if (cpf_cliente == null)
           {
             mostra_dados_pessoa = cnpj_cliente;
           }
           else
           {
             mostra_dados_pessoa = cpf_cliente;
           }

           itemHTML += "<tbody>";
           itemHTML += "<tr>";
           itemHTML += "<td><th><input type='checkbox' value='" +  id_cliente + "' name='verifica_check_box[]' id='verifica_check_box' class='flat'/></th></td>";
           itemHTML += "<td>" + nome_cliente + "</td>";
           itemHTML += "<td>" + telefone_cliente + "</td>";
           itemHTML += "<td>" + mostra_dados_pessoa  + "</td>";
           itemHTML += "<td>" + endereco_cliente + "</td>";
           itemHTML += "<td>" + email_cliente  + "</td>";
           itemHTML += "<td>" + cliente  + "</td>";
           itemHTML += "</tr>";
           itemHTML += "</tbody>";

          }

        });

      itemHTML += "</table>";
      container_mostra_cliente.html(itemHTML);
    }

  },
  error: function (XMLHttpRequest, textStatus, errorThrown)
  {
    console.log(data);
  }
});
}

No laravel tenho o seguinte código que faz a paginação:

public function index(Request $request)
{
 $qtd = $request['qtd'];
 $page = $request['page'];
 Paginator::currentPageResolver
 (function () use ($page)
 {
  return $page;
});
 $clientes = Clientes::paginate($qtd);
 $clientes = $clientes->appends
 (Request::capture()->except('page'));
 return response()->json
 (['clientes'=>$clientes], 200);
}

inserir a descrição da imagem aqui

inserir a descrição da imagem aqui

5
  • 1
    Porque tu escreve o HTML todo dentro da resposta do ajax? O ideal é tu ter teu HTML já pronto e popular ele com as informações oriundas da requisição. Desta maneira, o HTML e o CSS não serão perdidos e apenas o conteúdo será modificado a medida que tu for trocando a página. Commented 16/10/2017 às 13:35
  • Cara você não entendeu. Eu não faço nada no LARAVEL. Eu tenho somente uma API no laravel. Tenho outro projeto que traz tudo do LARAVEL, como token de autenticação, controllers e rotas, ou seja ele cria somente isso. O HTML e JAVASCRIPT. eu uso o AJAX para popular estas respostas que está em outra pasta. Quem faz é a API. Commented 16/10/2017 às 13:39
  • Não entendi o teu comentário. Em nenhum momento citei o Laravel. Minha sugestão foi montar a tua tabela escrita em HTML estaticamente, na tua própria view, de maneira que ela se mantenha de maneira estática e as únicas coisas que sejam dinâmicas (que mudem a cada requisição ao servidor) sejam as informações que as populam. Tua tabela e o estilo somem toda vez pois tu cria a tabela dinamicamente, concatenando todo o código HTML em uma variável (que possui escopo local e será sobrescrita na próxima requisição). Commented 16/10/2017 às 13:42
  • Tá vamos pelo princípio. Eu criei uma API. No laravel esta API só faz a consulta as informações do tipo Insere, Edita, Mota a Paginação e etc. Eu tenho daí um outro projeto que faz a requisição AJAX destas informações e monta o HTML. Eu não trabalho com views dentro do laravel. Então eu fiz esta paginação e preciso ver as rotas para que ela funcione no front-end. Commented 16/10/2017 às 13:46
  • Você poderia utilizar o angular nesse caso, acho o encaixe pelo seu código melhor ...
    – novic
    Commented 16/10/2017 às 14:48

1 Resposta 1

-1

No código que você tem dentro dentro da chamada ajax do JQuery pode haver erro nessa linha: itemHTML += "<table id='datatable-checkbox' class='table table-striped table-bordered bulk_action dataTable no-footer' role='grid' aria-describedby='datatable-checkbox_info'>"; veja todas as classes declaradas em "class" nessa linha. Veja também container_mostra_cliente.html(itemHTML) e observe a função do JQuery que você utiliza para modificar o conteúdo da table.

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 .