question-mark
Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

External pagination count not synced upon table search

See original GitHub issue

Steps to reproduce

  1. Open this codepen
  2. Search for anything (e.g Frozen )

Versions

Latest Vue, Vuetify Browser: Latest Chrome on Windows 10

What is expected ?

The pagination number should change based on search results. When I search for “Frozen” which gives me 1 out of 10 items, the pagination count is 2 instead of 1, Suggestion: Maybe provide another example in the docs which will sync the searched item count instead of the passed items to the table

pages () {
    return this.pagination.rowsPerPage ? Math.ceil(this.items.length / this.pagination.rowsPerPage) : 0
}

Instead of this.items.length maybe there is a way to expose this.searchedItems.length

What is actually happening ?

The pagination count is based on the initial set of items which is changes when you search in the table.

Reproduction Link

https://codepen.io/anon/pen/PKXQmY

Issue Analytics

  • State:closed
  • Created 6 years ago
  • Comments:5 (2 by maintainers)

github_iconTop GitHub Comments

3reactions
nekosaurcommented, Aug 31, 2017

The total length is already exposed on pagination object in the totalItems property. However it was not correctly updating when searching.

0reactions
Deg5112commented, Jul 27, 2018

it seems like when i add the search property to the v-data-table… doing that directly, while setting totalItems seems to be the cause, is there a fix for this? I have other data tables where setting the totalItems does populate the pagination 0-25 of 150 results etc…

Read more comments on GitHub >

github_iconTop Results From Across the Web

Vuetify v-data-table does not update pagination - Stack Overflow
So the total seems correct, but does not get updated in the v-data-table. It only shows a '-' sign. The pagination object seems...
Read more >
Omit record count in a list - Product Documentation | ServiceNow
Select Remove pagination count. (Optional) To omit the record count only in specific view: Select Remove pagination count for specific views.
Read more >
Pagination guidelines - GitLab Docs
Offset-based pagination is the easiest way to paginate over records, however, it does not scale well for large database tables.
Read more >
Table pagination and sorting - OutSystems 11 Documentation
In the OnSort drop-down list box of your Table Widget properties, select New On Sort Client Action. A new Action is created with...
Read more >
Need help vuetify data table pagination.sync makes repetative ...
Hi I am new to vue please help me I have around 1300 rows in my table and I want to fetch 10...
Read more >

github_iconTop Related Medium Post

No results found

github_iconTop Related StackOverflow Question

No results found

github_iconTroubleshoot Live Code

Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free

github_iconTop Related Reddit Thread

No results found

github_iconTop Related Hackernoon Post

No results found

github_iconTop Related Tweet

No results found

github_iconTop Related Dev.to Post

No results found

github_iconTop Related Hashnode Post

No results found