Vuetify Datatable, vuex and Laravel pagination (Updated)

#vuetify #vuex #laravel

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.

Top comments (7)

Sebastiangperez • Mar 12 '19 • Edited

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.

Carlos Lahrssen • Apr 5 '19

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....

Anna • Nov 10 '20

owhho~ greate post

Carlos Lahrssen • Apr 5 '19

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

Sebastiangperez • Apr 5 '19 • Edited

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">