John Davidson

Message:

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>

                            <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>

                            </li>

                            <pagination v-if="pagination.@{{p}} >1" :pagination="pagination" :offset="4" @paginate="fetchPosts()" </pagination>

                        </ul>

                    </nav>

                </div>

---

My Answer:
It looks like you are trying to limit the number of page links displayed in your pagination based on the total number of pages. To achieve this, you can modify your code as follows:

1. Update the condition in your v-for loop to limit the number of page links displayed to a fixed number (in this case, 4):

html

{{ p }}

2. In the above code, `Math.min(totalPage, 4)` ensures that the loop iterates only up to a maximum of 4 pages, even if the total number of pages is greater than 4.

By making these changes, you should be able to limit the page links displayed in your pagination to a fixed number of pages (in this case, 4).