Paging with Vue.Js

Question

I created a component that does the paging and takes the items sent by the server that are already paginated in 5 per page. The next button works correctly bringing all pages, but the pagination only stays from 1 until 5 and the go to page 6 for example wanted it to display from 6 until 10.

Beginning of codes:

import axios from 'axios'

export default {
  name: "TableBase",
  data() {
    return {
      search: '',
      data: [],
      objects: [],
      pages: [],
    }
  },
  props: {
    titleTable: String,
    actionButton: String,
    collumns: Array
  },
  methods: {
    pagination() {
      this.pages = [];
      for (var i = 1; i < this.objects.length + 1; i++) {
        this.pages.push(i);
      }
    },
    ajax(page) {
      axios
        .get('http://127.0.0.1:8000/api/categories?page=' + page)
        .then(response => {
          this.data = response.data;
          this.objects = response.data.data;
          this.pagination();
        })
        .catch(error => {
          console.log(error);
        })
    },
    navigate(page) {
      this.ajax(page);
    },
    previousPage() {
      if (this.data.current_page > 1) {
        this.ajax(this.data.current_page - 1);
      }
    },
    nextPage() {
      if (this.data.total / this.data.current_page !== this.data.per_page) {
        this.ajax(this.data.current_page + 1);
      }
    }
  },
  mounted() {
    axios
      .get('http://127.0.0.1:8000/api/categories')
      .then(response => {
        this.data = response.data;
        this.objects = response.data.data;
        this.pagination();
      })
      .catch(error => {
        console.log(error);
      })
  }
}

.card-header {
  justify-content: space-between;
  .box-title {
    margin: 10px;
    p {
      text-transform: uppercase;
    }
    .button {
      margin-left: 10px;
    }
  }
  .box-search {
    input {
      box-shadow: none;
    }
    margin: 20px;
  }
}

.card-content {
  overflow-x: auto;
  .fa-edit {
    color: blue;
  }
  .fa-trash-alt {
    color: red;
  }
}

<template>
<div>
    <section class="section">
        <div class="container">
            <div class="card">
                <div class="card-header">
                    <div class="box-title">
                        <p class="card-header-title">{{ titleTable }}</p>
                        <button class="button is-link is-outlined">Novo</button>
                    </div>
                    <div class="box-search">
                        <input class="input is-rounded" type="text" placeholder="Busca" v-model="search">
                    </div>
                </div>
                <div class="card-content">
                    <table class="table is-hoverable is-fullwidth">
                        <thead>
                        <tr>
                            <th v-for="(collumn, index) in collumns" :key="index">{{ collumn }}</th>
                        </tr>
                        </thead>
                        <tbody>
                        <tr v-for="object in objects" :key="object.id">
                            <td>{{ object.id }}</td>
                            <td>{{ object.name }}</td>
                            <td><i class="far fa-edit"></i></td>
                            <td><i class="far fa-trash-alt"></i></td>
                        </tr>
                        </tbody>
                    </table>
                </div>
                <footer class="card-footer">
                    <div class="card-footer-item">
                        <nav class="pagination is-centered" role="navigation" aria-label="pagination">
                            <a class="pagination-previous" :disabled="data.current_page === 1"
                               @click="previousPage">Anterior</a>
                            <a class="pagination-next" :disabled="data.current_page === data.last_page"
                               @click="nextPage">Próxima</a>
                            <ul class="pagination-list">
                                <li v-for="(page, index) in pages" :key="index">
                                    <a class="pagination-link" @click="navigate(page)"
                                       :class="{ 'is-current': page === data.current_page }">{{ page }}</a>
                                </li>
                            </ul>
                        </nav>
                    </div>
                </footer>
            </div>
        </div>
    </section>
</div>
</template>

Answer 1

The query problem, Select *from table limit offset, limit In order to properly paginate we should define the offset value well (Value that decides which position will start to display the values) Note: If in a table I have 20 records and I want to paginate 5 on 5 per page I have it means that the first page will be "select *from table 0.5" which means that means no record will be jumps will start displaying the records with the id(0-5), and the second page will be offset 5.5 which means it will display contacts from 5 to 10 Use the formula " page *limit-1" to find offset value and have the pagination work correctly