Closed FranzaLeny closed 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>
Fixed in v2
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.