protonemedia / inertiajs-tables-laravel-query-builder

Inertia.js Tables for Laravel Query Builder
https://protone.media/en/blog/introducing-inertiajs-tables-a-datatables-like-package-for-laravel-query-builder
MIT License
438 stars 123 forks source link

no perPage dinamic #47

Closed FranzaLeny closed 2 years ago

FranzaLeny commented 2 years ago

There is dont have perPage property when i add requsest perPage=20, each time i change a filter etc, the page will be resset pePage query be default behavior.

patrocle commented 2 years ago

Hi, in your controller :

 $perPage = $request->input('per-page') ?? 10;
 $users = QueryBuilder::for(User::class)
            ->paginate($perPage)
            ->withQueryString();

in vue I've done that even if it's not the optimal way because I didn't want to override everything : TablePerPage.vue

<template>
    <select
        v-model="perPageData"
        @change="setPerPage"
        class="w-15 block focus:ring-indigo-500 focus:border-indigo-500 shadow-sm sm:text-sm border-gray-300 rounded-md text-center pr-7"
    >
        <option :value="10" :key="10">10</option>
        <option :value="20" :key="20">20</option>
        <option :value="100" :key="100">100</option>
    </select>
</template>

<script>

export default {
    data() {
        return {
            perPageData: this.findGetParameter('per-page') ?? 10,
        }
    },
    methods:{
        setPerPage(){
            var queryParams = new URLSearchParams(window.location.search);
            queryParams.set("per-page", this.perPageData);
            this.$inertia.get(location.pathname + '?'+queryParams.toString(), {}, {
                replace: true,
                preserveState: true,
                preserveScroll: true
            });
        },
        findGetParameter(parameterName) {
            var result = null,
                tmp = [];
            location.search
                .substr(1)
                .split("&")
                .forEach(function (item) {
                    tmp = item.split("=");
                    if (tmp[0] === parameterName) result = decodeURIComponent(tmp[1]);
                });
            return result;
        }
    }
};
</script>
pascalbaljet commented 2 years ago

Fixed in v2