Creating routes for large pagination

3

I created a RestFull api in Laravel. In the project I have javascript and html in a folder that calls the API. Soon I created a pagination in the own laravel that I called in my own project in javascript.

However, I need to resolve the paging problem when I change pages. Clicking on the next page will go to the next but will lose the HTML and CSS settings. I wish I did not lose these settings.

I have in the file cadastro_clientes.php the code in javascript:

Code that calls the LARAVEL API:

 // 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);
  }
});
}

In laravel I have the following code that does the pagination:

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);
}

    
asked by anonymous 16.10.2017 / 15:27

1 answer

0

In the code you have inside the jQuery ajax call there may be an error on this line: itemHTML += "<table id='datatable-checkbox' class='table table-striped table-bordered bulk_action dataTable no-footer' role='grid' aria-describedby='datatable-checkbox_info'>"; see all classes declared in "class" in this line. See also container_mostra_cliente.html (itemHTML) and note the JQuery function that you use to modify the contents of the table.

    
16.10.2017 / 16:50