Question

当用户更改rowsPerPage属性时，我很难弄清楚如何将vuetify pagination.page属性改回1。

说结果集中总共有23行，并且rowsPerPage当前设置为10。如果用户转到第3页（最后），然后选择50个rowsPerPage，vue会调用我的ajax查询以从中获取新数据后端服务器，但它将rowsPerPage传递为50，并将页面传递为3。

由于这会导致sql offset属性为100，这比表中的23条记录要多得多，因此它不返回任何数据，因此屏幕将重新渲染没有记录的记录。

我要解决的问题是，当rowsPerPage属性更改时，将页面属性重新设置为1。

我用Google搜索了一堆，但是找不到答案。我是否试图以错误的方式解决此问题？

编辑：这是我的rails查看代码的示例：

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

还有我的js代码：

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),                                                                                                                                                    
}

Answer 1

因此，我想出了一个解决方案，该解决方案似乎可以满足我的要求。首先，我添加了一个新的数据属性：

oldRowsPerPage: 10

我将其设置为10，因为这是pagination.rowsPerPage属性的默认值。

接下来，我将getData方法更改为如下形式：

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;                                                                                                                                 
        });                                                                                                                                                     
},

该方法开头的条件检查以查看pagination.rowsPerPage值是否已更改。如果已设置，则将oldRowsPerPage属性设置为相同的值，然后将pagination.page属性更改为1。这将导致查询重置偏移量，以便它从结果集的开头开始返回记录，并且它将还更改了vuetify数据表，以使其显示结果集的第一页，而不是在用户选择新的pagination.rowsPerPage选择时继续尝试显示数据表当前位于的任何页面。

验证分页如何更改rowsPerPage属性更改时的页面属性

1 个答案: