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

"Unlock the power of vue i18n pluralization with these step-by-step instructions

The function was not invoked as expected and instead returned an error stating "this.method is not

Having trouble establishing a web socket connection using JavaScript

What is the reason for the lack of an applied CSS selector?

Automating image uploads with Selenium and Python even when the element appears hidden

Utilizing a combination of a `for` loop and `setInterval

Make jQuery fire an event when the "enter" key is pressed

Simple solution for storing key-value pairs temporarily in a form using JQuery

Leveraging Vue properties within CSS styling

Exploring the depths of JSON: Unraveling the secrets of reading dynamic object data

Troubleshooting issues with Three.js and .obj file shadows

Tips on utilizing the b-pagination API?

Is it possible to launch an Electron application by clicking a run button in the VSCode

Eliminate null objects from a JSON array with the help of GSON

What is the best way to transfer a JavaScript object to a VueJS component?

JavaScript now has Type Inference assistance

Error in Typescript occurrence when combining multiple optional types

PHP code to store the start and end dates of a week in an array

What is the procedure for configuring a proxy in Nuxt3?

Using Angular expressions, you can dynamically add strings to HTML based on conditions