File name
Commit message
Commit date
File name
Commit message
Commit date
<template>
<div class="datatable-bottom">
<div class="datatable-info">
Showing {{ startIndex + 1 }} to {{ endIndex }} of {{ filteredRows.length }} entries
</div>
<nav class="datatable-pagination">
<ul class="datatable-pagination-list">
<li :class="{'datatable-disabled': currentPage === 1}" @click="changePage(currentPage - 1)">
<button class="datatable-pagination-list-item-link">‹</button>
</li>
<li v-for="page in totalPages"
:key="page"
:class="{'datatable-active': currentPage === page}">
<button class="datatable-pagination-list-item-link" @click="changePage(page)">
{{ page }}
</button>
</li>
<li :class="{'datatable-disabled': currentPage === totalPages}" @click="changePage(currentPage + 1)">
<button class="datatable-pagination-list-item-link">›</button>
</li>
</ul>
</nav>
</div>
</template>
<script>
export default {
data() {
return {
currentPage: 1
};
},
computed: {
filteredRows() {
if (!this.searchQuery) return this.rows;
return this.rows.filter(row =>
Object.values(row).some(val =>
String(val).toLowerCase().includes(this.searchQuery.toLowerCase())
)
);
},
totalPages() {
return Math.ceil(this.filteredRows.length / this.perPage);
},
startIndex() {
return (this.currentPage - 1) * this.perPage;
},
endIndex() {
return Math.min(this.currentPage * this.perPage, this.filteredRows.length);
},
paginatedRows() {
return this.filteredRows.slice(this.startIndex, this.endIndex);
}
},
methods: {
changePage(page) {
if (page < 1 || page > this.totalPages) return;
this.currentPage = page;
}
}
};
</script>
<style scoped>
/* Add your styles here */
</style>