72 lines
2.0 KiB
Vue
72 lines
2.0 KiB
Vue
<template>
|
|
<div class="flex items-center justify-between p-4 bg-white border-t border-gray-300 rounded-b-lg">
|
|
<!-- Previous Page Button -->
|
|
<button
|
|
@click="goToPage(currentPage - 1)"
|
|
:disabled="currentPage === 1"
|
|
class="px-4 py-2 text-sm font-semibold text-white bg-blue-500 rounded-lg hover:bg-blue-600 disabled:bg-gray-300"
|
|
>
|
|
Previous
|
|
</button>
|
|
|
|
<!-- Page Numbers -->
|
|
<div class="flex space-x-2">
|
|
<button
|
|
v-for="page in totalPages"
|
|
:key="page"
|
|
@click="goToPage(page)"
|
|
:class="{'bg-blue-500 text-white': currentPage === page, 'bg-gray-100': currentPage !== page}"
|
|
class="px-4 py-2 text-sm font-semibold rounded-lg hover:bg-blue-200"
|
|
>
|
|
{{ page }}
|
|
</button>
|
|
</div>
|
|
|
|
<!-- Next Page Button -->
|
|
<button
|
|
@click="goToPage(currentPage + 1)"
|
|
:disabled="currentPage === totalPages"
|
|
class="px-4 py-2 text-sm font-semibold text-white bg-blue-500 rounded-lg hover:bg-blue-600 disabled:bg-gray-300"
|
|
>
|
|
Next
|
|
</button>
|
|
</div>
|
|
</template>
|
|
|
|
<script setup>
|
|
import { ref } from 'vue'
|
|
|
|
// Props to accept pagination data
|
|
const props = defineProps({
|
|
totalItems: {
|
|
type: Number,
|
|
required: true
|
|
},
|
|
itemsPerPage: {
|
|
type: Number,
|
|
required: true
|
|
}
|
|
})
|
|
|
|
const currentPage = ref(1)
|
|
|
|
// Compute total number of pages
|
|
const totalPages = computed(() => Math.ceil(props.totalItems / props.itemsPerPage))
|
|
|
|
// Go to specific page
|
|
const goToPage = (page) => {
|
|
if (page >= 1 && page <= totalPages.value) {
|
|
currentPage.value = page
|
|
// Emit an event or perform an action to fetch the data for the selected page
|
|
// e.g., fetchPageData(currentPage.value)
|
|
console.log(`Fetching data for page: ${currentPage.value}`)
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style scoped>
|
|
button:disabled {
|
|
cursor: not-allowed;
|
|
}
|
|
</style>
|
|
|