No More Posting New Topics!

If you have a question or an issue, please start a thread in our Github Discussions Forum.
This forum is closed for new threads/ topics.

Navigation

    Quasar Framework

    • Login
    • Search
    • Categories
    • Recent
    • Tags
    • Popular
    • Users
    • Groups
    • Search
    1. Home
    2. raphaels__44554
    R
    • Profile
    • Following 0
    • Followers 0
    • Topics 3
    • Posts 3
    • Best 0
    • Groups 0

    raphaels__44554

    @raphaels__44554

    0
    Reputation
    1
    Profile views
    3
    Posts
    0
    Followers
    0
    Following
    Joined Last Online

    raphaels__44554 Follow

    Latest posts made by raphaels__44554

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

      posted in Help
      R
      raphaels__44554