EcommercePackageRoute.vue

<template>
  <div>
    <table class="ui striped celled table">
      <thead>
      <tr>
        <th>نام پکیج</th>
        <th class="right aligned">تاریخ ایجاد</th>
        <th class="center aligned">وضعیت</th>
        <th>فعال در قسمت</th>
        <th class="right aligned">عملیات</th>
      </tr>
      </thead>
      <tbody>
      </tbody>
      <tfoot>
      <tr>
        <th colspan="5">
          <pagination :promise-factory=promiseFactory :from=1 :current-page.sync=currentPage :to=10 :total=1500 :last-page=150 :per-page=10></pagination>
        </th>
      </tr>
      </tfoot>
    </table>
  </div>
</template>

<script>
  import Pagination from "./Pagination";

  export default {
    components: {Pagination},
    mounted() {
      this.$root.app.changeHtmlTitle('لیست پکیج‌ها');
    },
    data() {
      const vm = this;
      return {
        currentPage: 100,
        loading: false,
        promiseFactory(page) {
          return () => {
            return new Promise((resolve, reject) => {
              setTimeout(() => {
                console.log("Page: page requested" + page.toString());
                // vm.currentPage = page;
                this.currentPage = page;
                resolve();
              }, 5000)
            });
          }
        }
      }
    }
  }
</script>

Pagination.vue

<template>
  <div v-if="hasPages">
    <div class="ui pagination menu" :class="{small: size === 'small', tiny: size === 'tiny', large: size === 'large', mini: size === 'mini', floated: floated}">
      <a class="icon item" :class="{'disabled': currentPage == 1}" @click="currentPageIsGonnaChange($event, currentPage - 1)">
        <i class="right chevron icon"></i>
      </a>

      <template v-if="slider.first !== null" v-for="page in slider.first">
        <a class="item" @click="currentPageIsGonnaChange($event, page)" :class="{active: page == currentPage}">{{ page | farsi }}</a>
      </template>

      <a v-if="slider.second" @click="$event.preventDefault();" class="item disabled">...</a>

      <template v-if="slider.second !== null" v-for="page in slider.second">
        <a class="item" @click="currentPageIsGonnaChange($event, page)" :class="{active: page == currentPage}">{{ page | farsi }}</a>
      </template>

      <a v-if="slider.last" @click="$event.preventDefault();" class="item disabled">...</a>

      <template v-if="slider.last !== null" v-for="page in slider.last">
        <a class="item" @click="currentPageIsGonnaChange($event, page)" :class="{active: page == currentPage}">{{ page | farsi }}</a>
      </template>

      <a class="icon item" :class="{'disabled' : currentPage == lastPage}" @click="currentPageIsGonnaChange($event, currentPage + 1)">
        <i class="left chevron icon"></i>
      </a>
    </div>
  </div>
</template>

<script>
  export default {
    props: {
      floated: {
        type: Boolean,
        default: true,
        required: false
      },
      size: {
        type: String,
        required: false,
        default: 'small'
      },
      total: {
        required: true
      },
      perPage: {
        required: true
      },
      currentPage: {
        required: false,
        default: 1,
        twoWay: true
      },
      lastPage: {
        required: true
      },
      from: {
        required: true
      },
      to: {
        required: true
      },
      promiseFactory: {
        type: Function,
        required: true
      }
    },

    methods: {
      getUrlRange(from, to) {
        const arr = [];

        while (from <= to) {
          arr.push(from);
          from++;
        }

        return arr;
      },

      currentPageIsGonnaChange($event, page) {
        $event.preventDefault();
        if (page != this.currentPage) {
          this.promiseFactory(page)();
        }
      }
    },

    computed: {
      hasPages() {
        return this.total > this.perPage;
      },

      slider() {
        if (this.lastPage < ((this.onEachSlide * 2) + 6)) {
          return {
            first: this.getUrlRange(this.currentPage, this.lastPage),
            second: null,
            last: null
          }
        }

        const win = this.onEachSlide * 2;

        if (!this.hasPages) {
          return {
            first: null,
            second: null,
            last: null
          }
        }

        if (this.currentPage <= win) {
          return {
            first: this.getUrlRange(1, win + 2),
            second: null,
            last: this.getUrlRange(this.lastPage -1, this.lastPage)
          }
        }

        if (this.currentPage > (this.lastPage - win)) {
          return {
            first: this.getUrlRange(1, 2),
            second: null,
            last: this.getUrlRange(this.lastPage - (win + 2), this.lastPage)
          }
        }

        return {
          first: this.getUrlRange(1, 2),
          second: this.getUrlRange(this.currentPage - this.onEachSlide, this.currentPage + this.onEachSlide),
          last: this.getUrlRange(this.lastPage - 1, this.lastPage)
        }
      }
    },

    data() {
      return {
        onEachSlide: 2
      }
    }
  }
</script>

<template>
  <div v-if="hasPages">
    <div class="ui pagination menu" :class="{small: size === 'small', tiny: size === 'tiny', large: size === 'large', mini: size === 'mini', floated: floated}">
      <a class="icon item" :class="{'disabled': currentPage == 1}" @click="currentPageIsGonnaChange($event, currentPage - 1)">
        <i class="right chevron icon"></i>
      </a>

      <template v-if="slider.first !== null" v-for="page in slider.first">
        <a class="item" @click="currentPageIsGonnaChange($event, page)" :class="{active: page == currentPage}">{{ page | farsi }}</a>
      </template>

      <a v-if="slider.second" @click="$event.preventDefault();" class="item disabled">...</a>

      <template v-if="slider.second !== null" v-for="page in slider.second">
        <a class="item" @click="currentPageIsGonnaChange($event, page)" :class="{active: page == currentPage}">{{ page | farsi }}</a>
      </template>

      <a v-if="slider.last" @click="$event.preventDefault();" class="item disabled">...</a>

      <template v-if="slider.last !== null" v-for="page in slider.last">
        <a class="item" @click="currentPageIsGonnaChange($event, page)" :class="{active: page == currentPage}">{{ page | farsi }}</a>
      </template>

      <a class="icon item" :class="{'disabled' : currentPage == lastPage}" @click="currentPageIsGonnaChange($event, currentPage + 1)">
        <i class="left chevron icon"></i>
      </a>
    </div>
  </div>
</template>

<script>
  export default {
    props: {
      floated: {
        type: Boolean,
        default: true,
        required: false
      },
      size: {
        type: String,
        required: false,
        default: 'small'
      },
      total: {
        required: true
      },
      perPage: {
        required: true
      },
      currentPage: {
        required: false,
        default: 1,
        twoWay: true
      },
      lastPage: {
        required: true
      },
      from: {
        required: true
      },
      to: {
        required: true
      },
      promiseFactory: {
        type: Function,
        required: true
      }
    },
    methods: {
      getUrlRange(from, to) {
        const arr = [];
        while (from <= to) {
          arr.push(from);
          from++;
        }
        return arr;
      },
      currentPageIsGonnaChange($event, page) {
        $event.preventDefault();
        if (page != this.currentPage) {
          this.$emit('update:currentPage', page)
        }
      }
    },
    computed: {
      hasPages() {
        return this.total > this.perPage;
      },
      slider() {
        if (this.lastPage < ((this.onEachSlide * 2) + 6)) {
          return {
            first: this.getUrlRange(this.currentPage, this.lastPage),
            second: null,
            last: null
          }
        }
        const win = this.onEachSlide * 2;
        if (!this.hasPages) {
          return {
            first: null,
            second: null,
            last: null
          }
        }
        if (this.currentPage <= win) {
          return {
            first: this.getUrlRange(1, win + 2),
            second: null,
            last: this.getUrlRange(this.lastPage -1, this.lastPage)
          }
        }
        if (this.currentPage > (this.lastPage - win)) {
          return {
            first: this.getUrlRange(1, 2),
            second: null,
            last: this.getUrlRange(this.lastPage - (win + 2), this.lastPage)
          }
        }
        return {
          first: this.getUrlRange(1, 2),
          second: this.getUrlRange(this.currentPage - this.onEachSlide, this.currentPage + this.onEachSlide),
          last: this.getUrlRange(this.lastPage - 1, this.lastPage)
        }
      }
    },
    data() {
      return {
        onEachSlide: 2
      }
    }
  }
</script>