Vuetify pagination howto change page property when rowsPerPage property changes

Question

I'm having trouble figuring out how to change the vuetify pagination.page property back to 1, when a user changes the rowsPerPage property.

Say there are a total of 23 rows in a result set and rowsPerPage is currently set to 10. If the users goes to the 3rd (last) page and then selectes 50 rowsPerPage, vue calls my ajax query to get new data from the backend server, but it passes rowsPerPage as 50 and it passes page as 3.

Since this causes the sql offset property to be 100, which is way more than the 23 records in the table, it returns no data and so the screen re-renders with no records.

What I would like to do to fix this is, when the rowsPerPage property changes, reset the page property back to 1.

I have googled a bunch but cannot find the answer. Am I trying to solve this problem the wrong way?

Edit: Here is a sample of my rails view code:

<v-card flat>                                                                                                                                                   
    <v-card-title class="pt-0 pb-0">                                                                                                                              
        <h2>No RSP/Participating Apps</h2>                                                                                                                          
        <%= render :partial => "search" %>                                                                                                                          
        <%= render :partial => "rows_per_page" %>                                                                                                                   
    </v-card-title>                                                                                                                                               
    <v-data-table                                                                                                                                                   
        :headers="headers"                                                                                                                                            
        :items="results"                                                                                                                                              
        :pagination.sync="pagination"                                                                                                                                 
        hide-actions                                                                                                                                                  
        :total-items="totalItems"                                                                                                                                     
        :must-sort=true                                                                                                                                               
        :search="pagination.search"                                                                                                                                   
    >
        ...                                                                                                                                                               
    </v-data-table>  
    <div class="text-xs-center pt-2">                                                                                                                             
        <v-pagination v-model="pagination.page" :length="pages"></v-pagination>                                                                                     
    </div>                                                                                                                                                        
</v-card>

And my js code:

data: {                                                                                                                                                       
    search: '',                                                                                                                                                 
    drawer: null,                                                                                                                                               
    miniVariant: false,                                                                                                                                         
    loading: true,                                                                                                                                              
    totalItems: 0,                                                                                                                                              
    results: [],                                                                                                                                                
    pagination: {                                                                                                                                               
        rowsPerPage: 10,                                                                                                                                          
    },                                                                                                                                                          
    rowsPerPageChoices: [                                                                                                                                       
        { text: '2 rows per page', value: 2 },                                                                                                                    
        { text: '5 rows per page', value: 5 },                                                                                                                    
        { text: '10 rows per page', value: 10 },                                                                                                                  
        { text: '20 rows per page', value: 20 },                                                                                                                  
        { text: '30 rows per page', value: 30 }                                                                                                                  
    ],                                                                                                                                                          
},
methods: {                                                                                                                                                    
    commonQueryParams() {                                                                                                                                       
        return '?sortBy=' + this.pagination.sortBy +                                                                                                              
            '&descending=' + this.pagination.descending +                                                                                                      
            '&page=' + this.pagination.page +                                                                                                                  
            '&rowsPerPage=' + this.pagination.rowsPerPage +                                                                                                    
            '&onlyTotal=0' +                                                                                                                                   
            '&filter=' + this.search;                                                                                                                          
    },                                                                                                                                                          
    queryParams() {                                                                                                                                             
        return this.commonQueryParams();                                                                                                                          
    },                                                                                                                                                          
    getData() {                                                                                                                                                 
        this.loading = true;                                                                                                                                      
        axios.get(this.dataApiUrl + '/' + this.dataEndPoint + this.queryParams(), {withCredentials: true})                                                        
            .then(response => {                                                                                                                                     
                this.results = response.data.data;                                                                                                                    
                this.totalItems = response.data.control_data.total;                                                                                                   
                this.loading = false;                                                                                                                                 
            });                                                                                                                                                     
    },                                                                                                                                                          
},                                                                                                                                                            
computed: {                                                                                                                                                   
    pages () {                                                                                                                                                  
        return this.pagination.rowsPerPage ? Math.ceil(this.totalItems / this.pagination.rowsPerPage) : 0;                                                        
    }                                                                                                                                                           
},                                                                                                                                                            
watch: {                                                                                                                                                      
    pagination: {                                                                                                                                               
        handler () {                                                                                                                                              
            this.getData();                                                                                                                                         
        },                                                                                                                                                        
        deep: true                                                                                                                                                
    },                                                                                                                                                          
    search: _.debounce(function () {                                                                                                                            
        this.getData()                                                                                                                                            
    }, 500),                                                                                                                                                    
}

could you show some of your code, i could give you a solution to fix that — Boussadjra Brahim

Jamey Cribbs Jamey Cribbs · Accepted Answer · 2018-11-20T13:51:59

So, I came up with a solution that appears to do what I want. First, I added a new data attribute:

oldRowsPerPage: 10

I set this to 10, because that is the default value for the pagination.rowsPerPage attribute.

Next, I changed the getData method to look like this:

getData() {                                                                                                                                                 
    if (this.pagination.rowsPerPage != this.oldRowsPerPage) {                                                                                                 
        this.oldRowsPerPage = this.pagination.rowsPerPage;                                                                                                      
        this.pagination.page = 1;                                                                                                                               
    }                                                                                                                                                         

    this.loading = true;                                                                                                                                      
    axios.get(this.dataApiUrl + '/' + this.dataEndPoint + this.queryParams(), {withCredentials: true})                                                        
        .then(response => {                                                                                                                                     
            this.results = response.data.data;                                                                                                                    
            this.totalItems = response.data.control_data.total;                                                                                                   
            this.loading = false;                                                                                                                                 
        });                                                                                                                                                     
},

The conditional at the beginning of the method checks to see if the pagination.rowsPerPage value has been changed. If it has, we set the oldRowsPerPage attribute to the same value and then we change the pagination.page attribute to 1. This will cause the query to reset the offset so that it starts returning records from the beginning of the result set and it will also change the vuetify datatable so that it displays the first page of the result set instead of continuing to try to show whatever page the datatable was currently on when the user selected the new pagination.rowsPerPage choice.

Vuetify pagination howto change page property when rowsPerPage property changes

1 Answers