CODEWITHSUNDEEP
laravelvuejs3inertiajs
mstdmstd
mstdmstd

Reputation: 3121

How in laravel / inertiajs app use pagination component?

On laravel 10 / inertiajs 2 I have list of products :

class HomeController extends Controller
{
    public function index(Request $request)
    {

        return Inertia::render('Home/Index', [
            'products' => ProductResource::collection($products),
            ...
        ]);

and in vue file :

<template>
        <div>
            <Products :products= "products" ></Products>
            ...
        </div>
</template>

<script>
import Products from '@/Pages/Home/Components/Products.vue'
...
export default defineComponent({
    props: {
        products: {
            type: Object,
            required: true,
        },
    },

    name: 'personalProductsList',
    components: {
        ...
    },
    setup(props) {
        let products = ref(props.products.data)
            ...

and in component resources/js/Pages/Home/Components/Products.vue :

<template>
    <div class="mt-6 grid grid-cols-1 gap-x-6 gap-y-10 sm:grid-cols-2 lg:grid-cols-4 xl:gap-x-8 d1">
        <template v-for="product in products" :key="product.id">
            <ProductItem :product="product"></ProductItem>
        </template>
    </div>

    <div class="p-2 frontend_pagination" v-show="showPagination && totalProductsCount > 1">
        <vue-awesome-paginate
            :total-items="totalProductsCount"
            :items-per-page="homeProductsPerPage"
            :max-pages-shown="5"
            v-model="currentPage"
            @click="paginateClick"
        />
    </div>

</template>

<script>
import {router, usePage} from '@inertiajs/vue3';

...
export default defineComponent({
    props: {
        products: {
            type: Object,
            required: true,
        },
    },

    name: 'frontendProductsList',
    // filterCategoryItems
    components: {
        ...
    },
    setup(props) {

        console.log('props::')
        console.log(props)
        let products = ref(props.products)

List of products is shown ok, but how can I use vue-awesome-paginate component ? It has paginateClick method:

function paginateClick(page) {
    console.log('paginateClick page::')
    console.log(page)
    currentPage.value = page
}

But how correctly to open other page binside of this method ? Can I use vue-awesome-paginate component here ?

Upvotes: 0

Views: 36

Answers (1)

Hoang
Hoang

Reputation: 51

You could do something like this:

import {router} from '@inertiajs/vue3'

const paginateClick = (page) => {
    // Creates a URLSearchParams object from the current URL’s query string.
    const currentUrl = window.location.pathname;

    const query = new URLSearchParams(window.location.search);

    // Only update page parameter 
    query.set('page', page);

    // Performs a full page reload using Inertia’s router.get(), redirecting the user to the updated URL.
    router.get(`${currentUrl}?${query.toString()}`)
}

Why This Approach?

Preserves Other Query Parameters

Unlike some pagination methods that replace the entire query string, this method keeps all existing parameters (e.g., filters, search terms) while only changing the page value.

Uses Inertia's Navigation System:

Instead of making a manual API request for pagination, this method redirects the user to a new page using Inertia’s routing. This ensures that server-side pagination still works as expected, and the UI remains consistent with Inertia’s workflow.

Prevents Fetching Issues:

The usual API-based pagination often fetches new data without changing the URL, making it difficult to share or bookmark specific pages. By updating the URL and using Inertia’s navigation, this approach ensures deep linking (users can refresh the page and stay on the correct page).

Upvotes: 1

Related Questions