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