loading...

Vuetify Datatable, vuex and Laravel pagination (Updated)

sebastiangperez profile image Sebastiangperez ・1 min read

There is someone here who can tell me how to achieve this? i couldn't find any good tutorial using the same keywords above.

Thanks.

Update: I just make it work by my self, terrible documentation and poor examples on the web btw.

Discussion

markdown guide
 

What was the solution that you found? Can you post it here for other people to find when they have the same issue?

 

This was the solution:

The php section on Laravel Controller

    public function all(Request $request){
        $rowsPerPage = ($request->rowsPerPage);
        $customers = Customer::paginate($rowsPerPage);
        return response()->json(["customers" => $customers],200);
    }

The Route ( Laravel )

Route::get('customers','CustomersController@all');

On the store , the Action:

getCustomers (context,page){
 let page_number = page.page || this.state.pagination.page;
 let rowsPerPage = page.rowsPerPage || this.state.pagination.rowsPerPage;
 Axios.get('/api/customers?page=' + page_number + '&rowsPerPage=' + rowsPerPage)
 .then((response) => {
   context.commit('updateCustomers', response.data.customers);
 });
},

The Mutation :

 updateCustomers(state,payload){
   state.customers = payload.data
   state.pagination.page = payload.current_page
   state.pagination.rowsPerPage = payload.per_page
   state.totalItems = payload.total
 },

In the main file app.js
Computed :

        totalItems(){
            return this.$store.getters.totalItems
        },
        rowsPerPageItems(){
            return this.$store.getters.rowsPerPageItems
        },
        pagination: {
            get:function() {
                return this.$store.getters.pagination;
            },
            set:function(value){
                console.log(value);
                this.$store.dispatch('getCustomers',value)
            }
        },

The Watch:

pagination: {
                handler () {

                    this.loading = true
                    this.$store.dispatch('getCustomers',this.page)
                        .then(result => {
                            this.loading = false
                        })
                },
                update(){
                    console.log("update");
                    this.loading = true
                    this.$store.dispatch('getCustomers',this.page)
                        .then(result => {
                            this.loading = false
                        })
                },
                deep: true
            }

The html (v-data-table tag )

<v-data-table :headers="headers" :items="customers" class="elevation-1"
                    :pagination.sync="pagination" :total-items="totalItems" :rows-per-page-items="rowsPerPageItems">
 
 

Can you explain better what you want to achieve ? How do you want to use vuex in this case ?

 

v-data-table only shows 15 records and paginated only those and in the pagination.sync object appear that i have a totalItems of 73 records.
From laravel i'm doing Users::paginate(15) that retrieve the data.
Im using vuex because i need values from all my app.

 

That's happening because the v-data-table only paginates the given data that it receives if I recall correctly. Since you're only returning the 15 in data from Laravel, it'll only attempt to paginate those 15. The best solution is to use the v-pagination component and build out a custom pagination based on this stackoverflow.com/questions/526978....