Hello,
This is my first time using quasar. I am trying to implement multiple filters with QData table. I have been able to implement filtering without much effort, however, I do not think my implementation is right as clicking on the next page destroys all of the filters and the request that is being sent to the server does not have the query parameters corresponding to the filters applied. My setup is as follows:
<q-table
row-key="id"
:grid="$q.screen.lt.sm"
:data="data"
:columns="columns"
:loading="loading"
:pagination.sync="pagination"
:filter="filter"
@row-click="onRowClick"
@request="onRequest"
>
<template v-slot:top-row>
<q-tr>
<q-td style="width:200px">
<q-input
v-model="customerNumberFilter"
maxlength="7"
placeholder="Customer Number"
@keyup.enter="applyFilter()"
>
</q-input>
</q-td>
<q-td class="text-right">
</q-td>
<q-td>
<q-select
label="Status"
v-model="filters.status"
:options="statusOptions"
map-options
/>
</q-td>
<q-td>
</q-td>
<q-td class="text-right">
<q-btn outline color="primary" label="Apply" @click="applyFilter()" />
</q-td>
</q-tr>
</template>
...
applyFilter(){
let params = {
per_page: rowsPerPage, page: page,
}
params[`filter[customerNumber]`]= 'someVal'
params[`filter[status]`]= 'someVal'
try {
let results = await this.$axios.get(this.url, { params })
this.data = results.data.data
this.addParamsToHistory( params )
this.updatePagination(results.data.meta)
} catch (error) {
this.toast('Could not get the list!', true)
}
},
addParamsToHistory(params) {
this.$router.replace({path: this.$route.path,
query: {...params }
}).catch(err => {
// added coz of Navigation Duplicate error
})
},
updatePagination (pagination) {
this.pagination.page = pagination.current_page
this.pagination.rowsPerPage = pagination.per_page
this.pagination.rowsNumber = pagination.total
},
}
A typical url with filters applied would be:
requests?per_page=15&page=1&total=true&filter[customerNumber]=someValue
AND when pagination link is clicked, filters are removed and the original request request remains
requests?per_page=15&page=1&total=true
If someone could point me in the right direction.
Thanks you!