CODEWITHSUNDEEP
vue.jspagination
user14166158
user14166158

Reputation:

How to implement this Vue pagination library

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 library: https://github.com/matfish2/vue-pagination-2

Upvotes: 4

Views: 13198

Answers (2)

Siwei
Siwei

Reputation: 21549

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.

  1. https://github.com/lokyoung/vuejs-paginate
  2. https://github.com/gilbitron/laravel-vue-pagination
  3. Element UI pagination: https://element.eleme.cn/#/zh-CN/component/pagination

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.

Upvotes: 0

Pierre Burton
Pierre Burton

Reputation: 2084

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;
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://cdn.rawgit.com/matfish2/vue-pagination-2/controlled-component/dist/vue-pagination-2.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="app" v-cloak>
  <h2><a target="_blank" href="https://www.npmjs.com/package/vue-pagination-2">Vue Pagination 2</a></h2>
  <p>Selected page: {{page}}</p>
  <ul>
    <li v-for="(record, index) of displayedRecords" :key="index">{{record}}</li>
  </ul>
  <pagination :records="records.length" v-model="page" :per-page="perPage" @paginate="callback">
  </pagination>
</div>

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;
}
<script src="https://cdn.rawgit.com/matfish2/vue-pagination-2/controlled-component/dist/vue-pagination-2.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="app" v-cloak>
  <h2><a target="_blank" href="https://www.npmjs.com/package/vue-pagination-2">Vue Pagination 2</a></h2>
  <p>Selected page: {{page}}</p>
  <ul>
    <li v-for="(record, index) of records" :key="index">{{record}}</li>
  </ul>
  <pagination :records="recordsLength" v-model="page" :per-page="perPage" @paginate="getPage">
  </pagination>
</div>

Upvotes: 4

Related Questions