QTable multiple filters with pagination: clicking on pagination links destroy filter/query string



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



  • @raphaels__44554

    Here’s a Quasar table like component with multi filters and pagination(will remember the filter value):

    quasar-qgrid:
    https://quasar-qgrid.netlify.app/examples
    https://github.com/AlexcastroDev/quasar-qgrid


Log in to reply