I want to limit the page number pagination on bottom it based on the records from database. I gave condition but it not working. please check it

Here is my code and last i gave condition for page link. offset=4 i fix page link to 4. for example < 1 2 3 4 > I want this output. but my output is < 1 2 3 4 5 6 7 8 > the page link also expand when records increase i want to fix it.

<div class="text-center" v-if="totalPage > 1">
                    <nav aria-label="Page navigation example">
                        <ul class="pagination">
                            <li class="page-item" :class="{disabled:filter.page <= 1}">
                                <a class="page-link" v-if="filter.page <=1">{{__("Previous")}}</a>
                                <a class="page-link" href="#" v-if="filter.page > 1" v-on:click="changePage(filter.page-1,$event)">{{__("Previous")}}</a>
                            <li class="page-item" v-if="p >= (filter.page-3) && p <= (filter.page+3)" :class="{active: p == filter.page}" v-for="p in totalPage" @click="changePage(p,$event)">
                                <a class="page-link" href="#">@{{p}}</a></li>
                            <li class="page-item" :class="{disabled:filter.page >= totalPage}">
                                <a v-if="filter.page >= totalPage" class="page-link">{{__("Next")}}</a>
                                <a href="#" class="page-link" v-if="filter.page < totalPage" v-on:click="changePage(filter.page+1,$event)">{{__("Next")}}</a>
                            <pagination v-if="[email protected]{{p}} >1" :pagination="pagination" :offset="4" @paginate="fetchPosts()" </pagination>

Source: Vue – Stack Overflow

September 3, 2021
Category : News
Tags: laravel | mysql | php | Vue.js

Leave a Reply

Your email address will not be published. Required fields are marked *

Sitemap | Terms | Privacy | Cookies | Advertising

Senior Software Developer

Creator of @LzoMedia I am a backend software developer based in London who likes beautiful code and has an adherence to standards & love's open-source.