simple-pagination.vue

<template lang="pug">
.pagination
  a.pagination__first(:class="{disabled: page == 1}" @click="setPage(1)")
  a.pagination__prev(:class="{disabled: page == 1}" @click="setPage(page - 1)")
  a.pagination__page(v-for="p in visiblePages", :class="{active: page == p, disabled: p == '...'}" @click="setPage(p)") {{p}}
  a.pagination__next(:class="{disabled: page == totalPages}" @click="setPage(page + 1)")
  a.pagination__last(:class="{disabled: page == totalPages}" @click="setPage(totalPages)")
</template>

<script>

export default {
  name: "pagination",
  props: {
    page: {
      type: Number,
      required: true
    },
    records: {
      type: Number,
      required: true
    },
    perPage: {
      type: Number,
      default: 25
    },
    options: {
      type: Object
    }
  },
  data () {
    return {
    }
  },
  computed: {
    totalPages: function() {
      return Math.ceil(this.records / this.perPage);
    },
    visiblePages: function() {
      var minPage = this.page - 3;
      if (minPage < 1) {
        minPage = 1;
      }
      var maxPage = this.page + 3;
      if (maxPage > this.totalPages) {
        maxPage = this.totalPages;
      }

      var ret = [];
      if (minPage != 1) {
        ret.push(1);
        ret.push('...');
      }
      for (var i = minPage; i <= maxPage; i++) {
        ret.push(i)
      }
      if (maxPage != this.totalPages) {
        ret.push('...');
        ret.push(this.totalPages)
      }

      return ret;
    }
  },
  methods: {
    setPage(page) {
      if (page != "..." && page >= 1 && page <= this.totalPages) {
        this.$emit('paginate', page);
      }
    }
  }
}
</script>