DEV Community

Discussion on: Vuetify Datatable, vuex and Laravel pagination (Updated)

Collapse
 
carloslahrssen profile image
Carlos Lahrssen

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

Collapse
 
sebastiangperez profile image
Sebastiangperez • 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">
Collapse
 
carloslahrssen profile image
Carlos Lahrssen

Awesome, thank you so much!

Collapse
 
p_reza profile image
privyreza

Great post!

How you know how to make the auto search work?