Creating pagination in Vue using an array of objects

Question

Creating pagination in Vue using an array of objects

I'm new to Vue and arrays and I need help paginating my json array so that only 10 items are displayed per page. Currently, all the items in the array are being shown in the <tr> body. I've tried different methods without success. Can someone assist me in finding the best way to paginate this json array and have it reflected in my table? Thank you.

Here is the code:

https://codesandbox.io/s/exciting-kapitsa-8d46t?file=/src/App.vue:1415-2437

App.vue

<template>
  <div id="app">
    <table class="table t3">
      <thead class="thead">
        <tr class="tr">
          <th class="td no" width="10%">
            <span class="has-text-orange">No</span>
          </th>
          <th class="td">
            <span class="has-text-orange">Name</span>
          </th>
        </tr>
      </thead>
      <tbody
        class="searchable tbody"
        style="max-height: 200px; min-height: 200px"
      >
        <tr class="tr" v-for="(p, index) in alphabets" :key="index">
          <td class="td no" width="10%">{{ ++index }}</td>
          <td class="td">{{ p.letter }}</td>
        </tr>
      </tbody>
    </table>
    <div class="column is-12">
      <nav
        class="pagination is-right"
        role="navigation"
        aria-label="pagination"
      >
        <ul class="pagination-list">
          <li>
            <a @click="prev"> Prev </a>
          </li>
          <li>
            <span
              class="pagination-link go-to has-text-orange"
              aria-label="Goto page 1"
              >{{ current }}</span
            >
          </li>
          <li>
            <a @click="next()"> Next </a>
          </li>

          <li>
            <input type="text" class="pagination-link" />
          </li>
          <li>
            <button class="button">Go</button>
          </li>
        </ul>
      </nav>
    </div>
  </div>
</template>

<script>
export default {
  name: "App",
  components: {},
  data() {
    return {
      current: 1,
      alphabets: [
        { letter: "a" },
        { letter: "b" },
        { letter: "c" },
        { letter: "d" },
        { letter: "e" },
        { letter: "f" },
        { letter: "g" },
        { letter: "h" },
        { letter: "i" },
        { letter: "j" },
        { letter: "k" },
        { letter: "l" },
        { letter: "m" },
        { letter: "n" },
        { letter: "o" },
        { letter: "p" },
        { letter: "q" },
        { letter: "r" },
        { letter: "s" },
        { letter: "t" },
        { letter: "u" },
        { letter: "v" },
        { letter: "w" },
        { letter: "x" },
        { letter: "y" },
        { letter: "z" },
      ],
    };
  },
};
</script>

<style>
#app {
  font-family: "Avenir", Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;
}
</style>

javascript arrays vue.js pagination vue-component

Answer 1

Answer №1

Optimize your data loop by working with a smaller subset. Specify the page size by creating a pageSize property:

pageSize: 10

Determine the start and end indices of the reduced set based on the current page and page size:

computed: {
  indexStart() {
    return (this.current - 1) * this.pageSize;
  },
  indexEnd() {
    return this.indexStart + this.pageSize;
  },
},

Create another computed method to extract the reduced set from the boundaries:

paginated() {
   return this.alphabets.slice(this.indexStart, this.indexEnd);
}

Iterate through the reduced set instead of all the data entries:

v-for="(p, index) in paginated"

Below is an updated demo with adjustments for handling next and previous buttons when they exceed the available range:

new Vue({
  el: "#app",
  data() {
    return {
      current: 1,
      pageSize: 10,
      alphabets: [ ... ]
    };
  },
  computed: {
    indexStart() { ... },
    indexEnd() { ... },
    paginated() { ... }
  },
  methods: {
    prev() { ... },
    next() { ... }
  }
});

<div id="app">
    <table class="table t3"> ... </table>
    <div class="column is-12"> ... </div>

    <script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
</div>

Answer 2

Optimize your data loop by working with a smaller subset. Specify the page size by creating a pageSize property:

pageSize: 10

Determine the start and end indices of the reduced set based on the current page and page size:

computed: {
  indexStart() {
    return (this.current - 1) * this.pageSize;
  },
  indexEnd() {
    return this.indexStart + this.pageSize;
  },
},

Create another computed method to extract the reduced set from the boundaries:

paginated() {
   return this.alphabets.slice(this.indexStart, this.indexEnd);
}

Iterate through the reduced set instead of all the data entries:

v-for="(p, index) in paginated"

Below is an updated demo with adjustments for handling next and previous buttons when they exceed the available range:

new Vue({
  el: "#app",
  data() {
    return {
      current: 1,
      pageSize: 10,
      alphabets: [ ... ]
    };
  },
  computed: {
    indexStart() { ... },
    indexEnd() { ... },
    paginated() { ... }
  },
  methods: {
    prev() { ... },
    next() { ... }
  }
});

<div id="app">
    <table class="table t3"> ... </table>
    <div class="column is-12"> ... </div>

    <script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
</div>

Creating pagination in Vue using an array of objects

Answer №1

Similar questions

Trouble with Click event not working in Electron and mouse cursor not changing when hovering over an HTML button?

When attempting to capture an element screenshot as PNG, a TypeError occurs indicating that the 'bytes' object is not callable

I need to know how to use Axios to fetch data from multiple sources at the same time without any risk of the

"Troubleshooting the lack of functionality in nested ajax calls, click events, or event

Tips for automatically closing SweetAlert after an AJAX request finishes

Have you ever wondered why the React HeroIcons architecture includes React.createElement instead of simply returning plain SVG elements?

extract the text content from an object

Tips for utilizing MUI Typography properties in version 5

Guide to automatically update mysql posts every second

ES5 compatibility issue with Vue.js export default

AngularJS, NodeJS, and Mongoose Challenge in Internet Explorer 11

Saving maps on React Native can be done easily using AsyncStorage

Refresh the context whenever the state object changes

In the JavaScript example provided, do child classes inherit their parent class prototype?

Exploring Angular14: A guide to efficiently looping through the controls of strictly typed FormGroups

Unlocking elements in Vue.js through functions

How come my invocation of (mobx) extendObservable isn't causing a re-render?

Utilize the synchronization feature of ES6 Promises in Jasmine with the then/catch method

The process of compressing font files (such as ArialMT.ttf) using JSZip is experiencing issues

Is it possible to add a jQuery-generated element to pure vanilla JavaScript?