How to paginate subsections of an array property in Vue.js?

Question

When displaying list data, one can iterate through the items using v-for. I have some filter controls which increase or decrease the number of visible items (size, type, name - stuff like that).

Regardless of this, I'd like to limit the amount visible on page to, say, 10 items.

In other words, if the filter hides 50 out of 100 result items (which are still stored in Vuex) I still want to be able to paginate through 5 pages (10 at a time only).

There's a few plugins such as this one which seem to help with that.

However, I'd like to try to do it manually to understand how it's done, though I'm a bit stumped.

What have you tried so far? can you share your code and explain the what errors you are getting ? — andrew
– andrew, Commented May 6, 2018 at 18:35
You'd basically want to slice whatever you're iterating through. results.slice(start, start + itemsPerPage) and increase and decrease start. — Bill Criswell
– Bill Criswell, Commented May 6, 2018 at 18:38
By the way, vuejs-paginator pages the http.get() calls (so that memory footprint in minimized). Is this a feature you want? — Richard Matsen
– Richard Matsen, Commented May 6, 2018 at 20:04

Richard Matsen · Accepted Answer · 2018-05-06 19:56:05Z

3

Since you have Vuex on board, a getter seems easiest.

export const getters = {
  pagedItems: state => {
    return pageNo => {
      const pageSize = state.pageSize || 10
      const items = state.items || []
      return items.slice(pageNo * pageSize, pageSize) 
    }
  }
}

Default values (e.g state.items || []) are there to stop the calculation erroring before initial load completes.

Use it on the component in a computed property, which will make it reactive when pageNo changes,

computed: {
  pagedItems() {
    return this.$store.getters['pagedItems'](this.pageNo)
  },
},

It just occurred to me that if you are filtering, you probably want to apply that before the pagination otherwise the display may not be be consistent in size (e.g page 1 filters to 4 items, page 2 to 6 items).

Depends on your exact filter, should be easy to add a getter for filteredItems and use that as source for pagedItems.

edited May 6, 2018 at 19:56

answered May 6, 2018 at 19:50

Richard Matsen

20.9k3 gold badges59 silver badges85 bronze badges

Sign up to request clarification or add additional context in comments.

6 Comments

dsp_099 Over a year ago

Thanks for the answer. Barely tangientially related: if I have a set of multiple filters including a fuzzy search, how would one conceptually go about figuring out the ORDER in which they are applied / pick and choose which ones are applied to reduce potential memory and processing loads?

Richard Matsen Over a year ago

Interesting, that seems problematic with the getter solution. Let me have a think about it.

dsp_099 Over a year ago

Wouldn't filtering simply alter the contents of the array in Vuex? That's kind of my initial instinct

dsp_099 Over a year ago

My concern is that with an initial results array of 100,000,000 items this could start causing issues. This won't be the case ever, but you know what I mean.

Richard Matsen Over a year ago

I'm not sure how much of a problem that would be. See Array.prototype.slice() which says 'The slice() method returns a shallow copy' and 'For object references (and not the actual object), slice copies object references into the new array'. So each filter makes a subset copy of the object reference list and leaves the original array as-is.

|

af costa · Accepted Answer · 2018-05-06 20:32:30Z

well, i would just divide the number of items by the number of data i want to display per page with the rest operator and create number of pages + 1, of course with some validations to empty data and so on.

Imagine you recieve an object that contains lists, this lists represent all the arrays with your data, each array is a row.

Just get the length, divide it with module operator and add one more, in your case, if you have 52 items, and want to have 10 per page:

52 % 10 = 2 52 / 10 = 5

you need 5 pages + 1 for the 2 items.

so i would do something like this:

const NUMBER_ITEMS_PER_PAGE = 10;

const numberItems = list.length;
const pages = numberItems / NUMBER_ITEMS_PER_PAGE

if(numberItems % NUMBER_ITEMS_PER_PAGE > 0) {
  pages++;
}

function buildPages(numberPages) {
  const pageObj = {}
  for(var i = 0; i < pages; i++) {
    pageObj.page[i+1]
    const arr = []
    for(var j = 0; j < (NUMBER_ITEMS_PER_PAGE) * (i + 1); j++) {
      arr.push(lists[i]) 
    }
   pageObj.page[i+1] = arr;
  }
}

of course this is just one possible solution, but i think this can let you start in some way, the code is just to help. good luck

Collectives™ on Stack Overflow

How to paginate subsections of an array property in Vue.js?

2 Answers 2

6 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

6 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related