Quasar Table Jump to page



  • Hi,

    In my current component i integrated a map, when i click a marker on the map i want to select a single row.
    Therefore i used the :selected.sync with an array which i always overwrite. This works fine but now if i have a problem.

    I cant find a functionality where i can jump to the page of the current selected item the proble is that i use sorting and filtering too. In the callback of the click i have the object of the (including __index) available.
    Watching the pagination control and doint my own resorting etc… seems like a dirty hack. Is there anywhere something available where i can just do something like this: pagination.JumpToIndex(__index) ?

    Any suggestions?

    Thanks a lot



  • If you have your pagination object:

          pagination: {
            page: 1,
            rowsPerPage: 20
          }
    

    Setting page to the page you want should do the trick.



  • Thanks for the answer,

    I tried that already and it works, But then i have to keept track in which page the item is at all times (after sorting, filtering etc…).



  • That’s true. It’s a bit awkward.



  • i try to make it as general as possible so you might be able to integrate it with slight modifications.



  • i have done the following now:
    I have overwritten the default sort (actually with the same code as the default table sort) and added the __sortedIndex:

      tableSort (data, sortBy, descending) {
          const col = this.columns.find(def => def.name === sortBy)
          if (col === null || col.field === void 0) {
            let sortedStuff = data.slice().map((row, i) => {
              row.__sortedIndex = i
              return row
            })
            return sortedStuff
          }
          const dir = descending ? -1 : 1,
            val = typeof col.field === 'function' ? v => col.field(v) : v => v[col.field]
          let sorted = data.sort((a, b) => {
            let A = val(a),
              B = val(b)
            if (A === null || A === void 0) {
              return -1 * dir
            }
            if (B === null || B === void 0) {
              return 1 * dir
            }
            if (col.sort) {
              return col.sort(A, B) * dir
            }
            if (isNumber(A) && isNumber(B)) {
              return (A - B) * dir
            }
            if (isDate(A) && isDate(B)) {
              return sortDate(A, B) * dir
            }
            if (typeof A === 'boolean' && typeof B === 'boolean') {
              return (a - b) * dir
            }
            [A, B] = [A, B].map(s => (s + '').toLowerCase())
            return A < B ? -1 * dir : A === B ? 0 : dir
          })
          let sortedStuff = sorted.slice().map((row, i) => {
            row.__sortedIndex = i
            return row
          })
          return sortedStuff
        }
    

    It would be nice to have a callback after sorting is done so we can add the __sortedIndex in this case so its not necessary to re-code the default sorting.
    also i am watching the selected rows change, and the pagination object change and select the page in the pagination object. this is done by using the default __index if not sorted and if available the __sortedIndex:

    selectedRows (what) {
          if (what.length > 0) {
            let idx = what[0].__index + 1
            if (what[0].__sortedIndex) {
              idx = what[0].__sortedIndex + 1
            }
            let newPage = idx / this.paginationControl.rowsPerPage
            this.paginationControl.page = Math.ceil(newPage)
           
          } else {
            this.paginationControl.page = 1
          }
        }
    

    It somehow works even with filtering, what i dont understand.
    do you have any better solution to this or do you see any problems here?

    Thanks for the help and Cheers!