Vue pagination - how to use it?

Question

I don't know how to use this library and other similar ones (also with pagination). There is no example anywhere on how to apply this pagination with a real data loop. Could someone show me how to use it?

Link to component: https://github.com/matfish2/vue-pagination-2

user_6620557 · Answer

Well, this particular lib looks like it's absolutely agnostic of the data you play with. It's only a visual components that will display a pagination but it won't actually handle your data.

So you just have to give it the total length of your data, the number of items per page and the current page. Each time the user clicks on one of its buttons, the component updates the current page number and emits an event to which you can hook a callback function.

If you store all your data client side, you just have to display a slice of your list according to the current page and the items per page. So if you have 500 records and you want to display them per 20:

new Vue({
  el: "#app",
  components: {
    Pagination
  },
  data: {
    page: 1,
    perPage: 20,
    records: []
  },
  methods: {
    callback: function(page) {
      // no need for callback here since you have all your data loaded already
    }
  },
  computed: {
    displayedRecords() {
      const startIndex = this.perPage * (this.page - 1);
      const endIndex = startIndex + this.perPage;
      return this.records.slice(startIndex, endIndex);
    }
  },
  created() {
    // here we simulate an api call that returns the complete list
    for (let i = 1; i <= 500; i++) {
      this.records.push(`Item ${i}`);
    }
  }
});

#app {
  text-align: center;
}

[v-cloak] {
  display: none;
}





  Vue Pagination 2
  Selected page: {{page}}
  
    {{record}}

If you need to paginate the data on the backend side, you need at least to know the length of your list through some api call that will tell you the info. Then, for the navigation, you need to rely on the paginate event of the lib:

new Vue({
  el: "#app",
  components: {
    Pagination
  },
  data: {
    page: 1,
    perPage: 20,
    records: [],
    recordsLength: 0
  },
  methods: {
    getPage: function(page) {
      // we simulate an api call that fetch the records from a backend
      this.records = [];
      const startIndex = this.perPage * (page - 1) + 1;
      const endIndex = startIndex + this.perPage - 1;
      for (let i = startIndex; i <= endIndex; i++) {
        this.records.push(`Item ${i}`);
      }
    },
    getRecordsLength() {
      // here we simulate an api call that returns the records length
      this.recordsLength = 500;
    }
  },
  created() {
    this.getRecordsLength();
    this.getPage(this.page);
  }
});

#app {
  text-align: center;
}

[v-cloak] {
  display: none;
}





  Vue Pagination 2
  Selected page: {{page}}
  
    {{record}}

user_445908 · Answer

I investigated several vuejs pagination tools. It seems that in Vuejs people are not having the same idea of how to use/implement this feature.

when writing Rails, it's very easy to use pagination via will-pagination or kaminari.

when writing Vue, keep in mind that Vuejs is just the front-end, you have to implement your back-end code.

and I prefer to use Element-UI when using Element, it's easier than other vue's pagination components.

for more information, please refer to the official doc.

Vue pagination - how to use it?

2 Answers