ynoth25's avatar

Laravel Pagination with VueJS

I can retrieve data from controller using pagination, I can also display the data.

My problem is I have a custom pagination template and it has 3 divs and I can only loop inside 1 div and I can 't use my custom 'Previous & Next button'

<nav class="border-t border-gray-200 px-4 flex items-center justify-between sm:px-0" aria-label="Pagination">
    <div class="-mt-px w-0 flex-1 flex">
        <a href="#" class="border-t-2 border-transparent pt-4 pr-1 inline-flex items-center text-sm font-medium text-gray-500 hover:text-gray-700 hover:border-gray-200">
            <ArrowNarrowLeftIcon class="mr-3 h-5 w-5 text-gray-400" aria-hidden="true" />
            Previous
        </a>
    </div>
    <div class="hidden md:-mt-px md:flex">
        <Link v-for="(link, key) in links" :key="key" :href="link.url" :class="{'border-purple-500 text-purple-600 border-t-2 pt-4 px-4 inline-flex items-center text-sm font-medium': link.active}" class="border-transparent text-gray-500 hover:text-gray-700 hover:border-gray-200 border-t-2 pt-4 px-4 inline-flex items-center text-sm font-medium">
            {{link.label}}
        </Link>
    </div>
    <div class="-mt-px w-0 flex-1 flex justify-end">
        <a href="#" class="border-t-2 border-transparent pt-4 pl-1 inline-flex items-center text-sm font-medium text-gray-500 hover:text-gray-700 hover:border-gray-200">
            Next
            <ArrowNarrowRightIcon class="ml-3 h-5 w-5 text-gray-400" aria-hidden="true" />
        </a>
    </div>
</nav>
0 likes
5 replies
Sinnbeck's avatar

Maybe show some vue code for the buttons and pagination handling as well?

ynoth25's avatar
ynoth25
OP
Best Answer
Level 1

@Sinnbeck sorry I misclicked 'Best answer', I am using the laravel pagination and since my custom pagination is just a component I just passed the links from the server.

Sinnbeck's avatar

@ynoth25 You can remove a "best answer" by marking your own answer as best, and deleting the answer.

SilenceBringer's avatar

@ynoth25 why you can use 'Previous & Next button'?

you have loop for page numbers - it's ok.

Buttons should not be inside the loop. They have different conditions (currentPage > 1 for previous and currentPage != lastPage for next)

ynoth25's avatar

@SilenceBringer the default previous and next button of laravel pagination has different icon and also if u take a look at my pagination template it has 3 divs so in short previous, page numbers and next button are separated

Please or to participate in this conversation.