PaulCatalin97's avatar

JavaScript Pagination when 1 page shows page previous-1-1-next

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!

0 likes
1 reply
jlrdw's avatar

You have to go by page count, and integrate an if statement where needed.

Edit: Consider using the length aware paginator and the templates provided by laravel. You can use one as a guide and modify as needed, I had a case where I needed to, see:

https://laracasts.com/discuss/channels/guides/paginator-another-episode

You can write a customized template however you like. Note, just suggestion.

2 likes

Please or to participate in this conversation.