admin-erahn/resources/js/components/pagination.vue

<template>
    <div v-if="data" class="bg-white px-4 py-3 flex items-center justify-between border-t border-gray-200 sm:px-6">
        <!-- <div v-if="data.total > 0" class="flex-1 flex justify-between sm:hidden">
            <button @click.prevent="getPreviousPage"
                class="relative inline-flex items-center px-4 py-2 border border-gray-300 text-sm font-medium rounded-md bg-white"
                :class="data.current_page == 1 ? 'text-gray-400 cursor-not-allowed': 'text-gray-700 hover:bg-gray-50' ">
                Previous
            </button>
            <button @click.prevent="getNextPage"
                class="ml-3 relative inline-flex items-center px-4 py-2 border border-gray-300 text-sm font-medium rounded-md bg-white"
                :class="data.current_page >= data.last_page ? 'text-gray-400 cursor-not-allowed': 'text-gray-700 hover:bg-gray-50' ">
                Next
            </button>
        </div> -->
        
        <div v-if="data.total > 0" class="hidden sm:flex-1 sm:flex flex sm:items-center sm:justify-between ">
            <div>
                <p class="text-sm text-gray-700">
                Showing
                {{ ' ' }}
                <span class="font-medium">{{ to }}</span>
                {{ ' ' }}
                to
                {{ ' ' }}
                <span class="font-medium">{{ from }}</span>
                {{ ' ' }}
                of
                {{ ' ' }}
                <span class="font-medium">{{ total }}</span>
                {{ ' ' }}
                records
                </p>
            </div>

            <div>
                <nav class="relative z-0 inline-flex rounded-md shadow-sm -space-x-px" aria-label="Pagination">
                    <button @click.prevent="getPreviousPage"
                        class="relative inline-flex items-center px-2 py-2 rounded-l-md border border-gray-300 bg-white text-sm font-medium text-gray-500"
                        :class="data.current_page == 1 ? 'text-gray-300 cursor-not-allowed' : 'hover:bg-gray-50' ">
                        <span class="sr-only">Previous</span>
                        <svg class="h-5 w-5" :class="{'text-gray-400': data.current_page == 1}" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor"
                        aria-hidden="true">
                        <path fill-rule="evenodd"
                            d="M12.707 5.293a1 1 0 010 1.414L9.414 10l3.293 3.293a1 1 0 01-1.414 1.414l-4-4a1 1 0 010-1.414l4-4a1 1 0 011.414 0z"
                            clip-rule="evenodd" />
                        </svg>
                    </button>

                    <!-- <a href="#" aria-current="page"
                        class="z-10 bg-indigo-50 border-indigo-500 text-indigo-600 relative inline-flex items-center px-4 py-2 border text-sm font-medium">
                        A
                    </a>
                     -->
                    <div v-for="(page, index) in range" :key="index">
                        <button v-if="page != '...' " @click.prevent="getPage(page)"
                            class="bg-white border-gray-300 text-gray-500 hidden md:inline-flex relative items-center px-4 py-2 border text-sm font-medium"
                            :class="data.current_page == page ? 'z-10 bg-indigo-50 border-indigo-500 text-indigo-600' : 'hover:bg-gray-50' ">
                            {{ page }}
                        </button>
                        <span v-else
                            class="relative inline-flex items-center px-4 py-2 border border-gray-300 bg-white text-sm font-medium text-gray-700 cursor-not-allowed hidden md:block">
                            ...
                        </span>     
                    </div>

                    <button @click.prevent="getNextPage"
                        class="relative inline-flex items-center px-2 py-2 rounded-r-md border border-gray-300 bg-white text-sm font-medium text-gray-500 hover:bg-gray-50"
                        :class="{'text-gray-300 cursor-not-allowed': data.current_page >= data.last_page}">
                        <span class="sr-only">Next</span>
                        <svg class="h-5 w-5" :class="{'text-gray-400': data.current_page >= data.last_page}" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor"
                        aria-hidden="true">
                        <path fill-rule="evenodd"
                            d="M7.293 14.707a1 1 0 010-1.414L10.586 10 7.293 6.707a1 1 0 011.414-1.414l4 4a1 1 0 010 1.414l-4 4a1 1 0 01-1.414 0z"
                            clip-rule="evenodd" />
                        </svg>
                    </button>
                </nav>
            </div>
        </div>
    </div>
</template>

<script>
    export default {
        name: 'Pagination',
        props: {
            data: Object
        },
        data() {
            return {
                range: []
            }
        },
        // setup(props,context){
        //     console.log(props.data)
        // },
        computed: {
            to: function() {
                if(this.data.current_page < this.data.last_page) {
                    return this.data.current_page > 1 ? 
                        (this.data.current_page - 1) * this.data.per_page + 1 : 1
                }
                else {
                    return this.data.from
                }
            },
            from: function() {

                if(this.data.current_page < this.data.last_page)
                    return this.data.per_page * this.data.current_page
                else
                    return this.data.total
            },
            total: function() {
                return this.data.total
            },
            propsToWatch() {
                return this.data.current_page
            }
        },
        watch: {
            propsToWatch: {
                handler: 'organisePageLinks',
                immediate: true
            }
        },
        methods: {
            organisePageLinks() {
                this.range = []
                for (let i = 1; i <= this.data.last_page; i++) {
                    if (
                        i == 1 || // first page
                        i == this.data.last_page || // last page
                        i == this.data.current_page || // current page
                        i == this.data.current_page - 1 || // page before current
                        i == this.data.current_page + 1 || // page after current
                        (i <= 3 && this.data.current_page < 3) || // "filler" links at start
                        (i >= this.data.last_page - 3 && this.data.current_page > this.data.last_page - 3) // "filler" links at end
                    ) {
                        let index = this.range.length
                            if (index > 0 && this.range[index - 1] < i - 1) {
                                // if this page is not the next one insequence, add in 3 dots "..."
                                this.range.push('...')
                            }
                            this.range.push(i)
                    }
                }
            },
            getPage(pageNumber) {
                this.$emit('clickEvent_', pageNumber)
            },
            getPreviousPage() {
                if(this.data.current_page > 1)
                    this.getPage(this.data.current_page - 1)
            },
            getNextPage() {
                if(this.data.current_page < this.data.last_page)
                    this.getPage(this.data.current_page + 1)
            }
        }
    }

</script>