I'm using a table to show the values from my data base and I use a JQuery for pagination but when I use the search bar and it only shows data for 1 page, the pagination shows Previous pg1 pg1 Next and the second button I don`t need to be shown
When it shows data for 2-3-4 pages works corectly
Here is the code for the table and the buttons
function getProducts() {
$.get('/get-products', parameters).then(res => {
console.log(res);
let products = res.data;
preview = res.current_page > 1 ? true : false;
next = res.current_page < res.last_page ? true : false;
preview ? $('#previous').removeAttr("disabled") : $('#previous').attr('disabled', 'disabled');
next ? $('#next').removeAttr("disabled") : $('#next').attr('disabled', 'disabled');
let table_body = $('#tbody');
table_body.empty();
var html = '';
$.each(products, function(index, val){
html += "<tr> " +
"<td>" + val.name + "</td>" +
"<td>" + val.quantity + "</td>" +
"<td>" + val.price +"<p> Lei </p>"+"</td>" +
"<td>" + val.status.name + "</td>" +
"<td>" + val.description + "</td>" +
"<td>" + val.technics + "</td>" +
"<td>" + "<a class='btn btn-warning' href='/editareprodus/"+ val.id +"'>Edit</a>" + "</td>" +
"<td>" + "<a class='btn btn-danger' onclick=deleteItem("+ val.id +")>Delete</a>" + "</td>" +
"</tr>";
});
table_body.append(html);
$('.page_button').remove();
var buttons = '';
for(var i = 1; i < res.last_page+1; i++){
if(i == 1) {
if(i == res.current_page){
buttons += '<button type="button" class="btn btn-danger page_button" onclick="setPageParameter('+i+')">'+i+'</button>';
} else{
buttons += '<button type="button" class="btn btn-primary page_button" onclick="setPageParameter('+i+')">'+i+'</button>';
}
}
if(i == res.last_page) {
if(i == res.current_page){
buttons += '<button type="button" class="btn btn-danger page_button" onclick="setPageParameter('+i+')">'+i+'</button>';
} else{
buttons += '<button type="button" class="btn btn-primary page_button" onclick="setPageParameter('+i+')">'+i+'</button>';
}
}
if(i == res.current_page-2 && res.current_page-2 >= 2 ) {
buttons += '<span class="page_button">...</span>';
}
if(i == res.current_page+2 && res.current_page+2 < res.last_page) {
buttons += '<span class="page_button">...</span>';
}
if((i != 1 && i != res.last_page) && (i == res.current_page-1 || i == res.current_page || i == res.current_page+1)){
if(i == res.current_page){
buttons += '<button type="button" class="btn btn-danger page_button" onclick="setPageParameter('+i+')">'+i+'</button>';
} else{
buttons += '<button type="button" class="btn btn-primary page_button" onclick="setPageParameter('+i+')">'+i+'</button>';
}
}
}
$('#previous').after(buttons)
});
I will add the code for the previous and next page button just to see them but these work fine
function previewPage() {
if(preview) {
parameters.page--;
getProducts();
}
}
function nextPage() {
if(next) {
parameters.page++;
getProducts();
}
}
function setPageParameter(page) {
this.parameters.page = page;
getProducts();
}
how can I change the code to show me 1pg button when I have 1 page, not 2 buttons??
Thank you very much!