exchange-2.0/resources/assets/vue/components/general/elements/PaginationComponent.vue

<template>
    <div class="row no-margin" v-if="Object.keys(pagination).length > 0">
        <div class="col no-padding">
            <div class="row justify-content-end" v-if="pagination.last_page !== 1">
                <div class="col-auto b-a p-t-5 p-b-5 m-l-5 pointer b-grey pointer" @click="callPage(1)" v-if="pagination.current_page !== 1 && !pageNumbers().includes(1)">
                    <i class="fa fa-angle-double-left fs-14 muted lh-16"></i>
                </div>
                <div class="col-auto b-a p-t-5 p-b-5 m-l-5" v-for="n in pageNumbers()" @click="callPage(n)" :class="[{'b-grey': n !== pagination.current_page}, {'pointer': n !== pagination.current_page}, {'b-complete': n === pagination.current_page}, {'bg-complete': n === pagination.current_page}]">
                    <small class="fs-11" :class="[{'muted': n !== pagination.current_page}, {'text-white': n === pagination.current_page}, {'bold': n === pagination.current_page}]">{{n}}</small>
                </div>
                <div class="col-auto b-a p-t-5 p-b-5 m-l-5 pointer b-grey pointer" @click="callPage(pagination.last_page)" v-if="pagination.current_page !== pagination.last_page && !pageNumbers().includes(pagination.last_page)">
                    <i class="fa fa-angle-double-right fs-14 muted lh-16"></i>
                </div>
            </div>
        </div>
    </div>
</template>
<script>
    export default {
        props: {
            section:{
                type: String,
                required: true
            }
        },
        data(){
            return {
                pagination: {}
            }
        },
        methods: {
            makePagination(pagination){
                this.pagination = pagination;
            },
            callPage(page){
                if(page !== this.pagination.current_page){
                    this.$store.dispatch('updateListQueue', {'name': this.section, 'page': page, 'filters': this.$store.getters.getListDetails(this.section).filters});
                }
            },
            pageNumbers(){
                let pages = 5;
                let numbers = [],
                    partition = (pages - 1) / 2,
                    previousOverflow = -(this.pagination.current_page - partition - 1),
                    nextOverflow = -(this.pagination.last_page - (this.pagination.current_page + partition)),
                    previous = partition + (nextOverflow > 0 ? nextOverflow : 0),
                    next = partition + (previousOverflow > 0 ? previousOverflow : 0);

                for (let i = this.pagination.current_page - previous; i < this.pagination.current_page; i++) {
                    if(i >= 1) {
                        numbers.push(i);
                    }
                }

                numbers.push(this.pagination.current_page);

                for (let i = this.pagination.current_page + 1; i <= (this.pagination.current_page + next); i++) {
                    if(i <= this.pagination.last_page) {
                        numbers.push(i);
                    }
                }


                return numbers
            }
        }
    }
</script>