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 proper Laravel that I called in my own project in javascript.
However, I need to resolve the issue of paging when switching pages. By clicking on the next page it goes to the next but loses the settings of the HTML and CSS. I wish you wouldn’t lose these settings.
I have in the file cadastro_clientes.php the javascript code:
Code calling 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);
}
});
}
I have the following code in the terminal that makes 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);
}
Why do you write all the HTML inside the ajax answer? Ideally, you should have your HTML ready and popular with the information coming from the request. This way, HTML and CSS will not be lost and only the content will be modified as you switch the page.
– Lorenzo Fernandez
Dude you don’t understand. I don’t do anything at LARAVEL. I only have an API at Laravel. I have another project that brings everything from LARAVEL, as authentication token, controllers and routes, ie it creates only this. HTML and JAVASCRIPT. i use AJAX to popular these responses which is in another folder. Who does is the API.
– Felipe Michael da Fonseca
I didn’t understand your comment. At no time did I quote
Laravel. My suggestion was to set up yours table written inHTMLstatically, in your own view, so that it stays static and the only things that are dynamic (that change with each request to the server) are the information that populates them. Your table and style disappear every time because you create the table dynamically, concatenating the entire codeHTMLin a variable (which has local scope and will be overwritten in the next request).– Lorenzo Fernandez
Let’s go at the beginning. I created an API. In the Laravel this API only consults the information of type Inserts, Edits, Mota a Pagination and etc. I have from there another project that makes the AJAX request of this information and assembles the HTML. I don’t work with views inside the Windows. So I made this pagination and I need to see the routes for it to work on the front end.
– Felipe Michael da Fonseca
You could use the angle in this case, I think the snap by your code better ...
– novic