Quasar Table Jump to page

rund1me

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

Hawkeye64

If you have your pagination object:

      pagination: {
        page: 1,
        rowsPerPage: 20
      }

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

rund1me

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…).

Hawkeye64

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

rund1me

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

rund1me

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!

No More Posting New Topics!

Quasar Table Jump to page