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

    q-table on pagination Next flashes last page before showing next page

    Framework
    q-table
    3
    8
    1269
    Loading More Posts
    • Oldest to Newest
    • Newest to Oldest
    • Most Votes
    Reply
    • Reply as topic
    Log in to reply
    This topic has been deleted. Only users with topic management privileges can see it.
    • S
      stuffy last edited by stuffy

      This sounds weired but on clicking pagination Next, q-table flashes last page before showing the next page. This happens on fresh page load, once pages are traversed then it moves to next page smoothly.
      Did someone come across this or have any suggestions looking at the below code?

              <q-table
                gridX
                :data="lists.data"
                :columns="columns"
                row-key="id"
                selection="none"
                :loading="tblLoading"
                loading-label="Loading lists"
                :pagination.sync="pagination"
                :rows-per-page-options="rowsPerPageOptions"
                @request="onRequest"
                binary-state-sort
                :selected.sync="selected"
                flat
                separator="none"
                rows-per-page-label="Show"
                hide-headerX
                color="primary"
                table-class="tblData"
                card-class="bg-white text-brand"
              >
      
            pagination: {
              sortBy: "id",
              descending: true,
              page: 1,
              rowsPerPage: 7,
              rowsNumber: 0,
              skip: 0
            },
            rowsPerPageOptions: [7, 10, 25, 50, 100],
      
          onRequest(requestProp) {
            this.tblLoading = true;
            let {
              page,
              rowsPerPage,
              rowsNumber,
              sortBy,
              descending
            } = requestProp.pagination;
            this.pagination = requestProp.pagination;
            const skip = (page - 1) * rowsPerPage;
            this.pagination.skip = skip;
            this.pagination.rowsPerPage = rowsPerPage;
            return this.findLists(this.listQuery())
              .then(response => {
                      this.tblLoading = false;
                      // set pagination
                      this.pagination.rowsNumber = response.total;
                      this.pagination.page = page;
                      this.pagination.rowsPerPage = rowsPerPage;
                      this.pagination.sortBy = sortBy;
                      this.pagination.descending = descending;
                      this.pagination.skip = skip;
                    })
                    .catch(e => {
                     ...
      
      1 Reply Last reply Reply Quote 0
      • s.molinari
        s.molinari last edited by

        Not sure it will help, but what happens, if you put rowsNumber to something like 7, instead of 0?

        Scott

        1 Reply Last reply Reply Quote 0
        • S
          stuffy last edited by

          Ahh, that seems to do the trick. Thank you.

          One more thing, during the next page being fetched from the server the current page vanishes and shows a one liner loading ists. This kind of hinders the UI. Is there was way to show the curret page as it is (the loading/ progress bar under the row header is active as expected) till next page is loaded. Removing the loading-label doesn’t help.

          metalsadman 1 Reply Last reply Reply Quote 0
          • s.molinari
            s.molinari last edited by

            I’m a bit lost on that problem (and its description).

            Scott

            1 Reply Last reply Reply Quote 0
            • metalsadman
              metalsadman @stuffy last edited by metalsadman

              @stuffy normally it will just show a loading indicator at qtable col headers, it doesnt clear the current table items until you set the new data, so you’re defintely doing something wrong. Provide a reproductio pen so we can help you more.

              1 Reply Last reply Reply Quote 0
              • S
                stuffy last edited by

                @metalsadman thank you for looking into this.

                Please find the link to codepen https://codepen.io/Stuffy1/pen/QWWOVrq?

                1 Reply Last reply Reply Quote 0
                • S
                  stuffy last edited by

                  @metalsadman can give a suggestion on this as unable to find whats causing this issue …

                  metalsadman 1 Reply Last reply Reply Quote 0
                  • metalsadman
                    metalsadman @stuffy last edited by

                    @stuffy your reproduction code has many errors, pls fix those non related to your question first. take this one from docs as example. https://codepen.io/metalsadman/pen/xxxJKmJ?&editable=true&editors=101

                    1 Reply Last reply Reply Quote 0
                    • First post
                      Last post