diff --git a/src/components/data-table/VTable.vue b/src/components/data-table/VTable.vue index df02e73..a85cac1 100644 --- a/src/components/data-table/VTable.vue +++ b/src/components/data-table/VTable.vue @@ -8,6 +8,7 @@ :model-value="page" @update:model-value="updatePage" :total="items.length" + :itemsPerPage="itemsPerPage" /> @@ -65,9 +66,7 @@ export default { return { updatePage, - paginatedItems, - columns }; } diff --git a/src/components/pagination/VPagination.vue b/src/components/pagination/VPagination.vue index 78a9a60..10d977e 100644 --- a/src/components/pagination/VPagination.vue +++ b/src/components/pagination/VPagination.vue @@ -1,9 +1,16 @@ @@ -31,6 +45,10 @@ export default { total: { type: Number, required: true + }, + itemsPerPage: { + type: Number, + required: true } }, @@ -38,14 +56,17 @@ export default { setup(props, context) { function updateValue(value) { - if (value < 1) { - value = 1; - } + if (value > Math.floor(props.total / props.itemsPerPage)) { + value = Math.ceil(props.total / props.itemsPerPage) + } else { + if (value < 1) { + value = 1; + } - if (value > props.total) { - value = props.total; + if (value > props.total) { + value = props.total; + } } - context.emit('update:modelValue', value); } @@ -57,10 +78,20 @@ export default { updateValue(props.modelValue - 1); } + function goFirst() { + updateValue(props.modelValue - props.modelValue + 1); + } + + function goLast() { + updateValue(Math.ceil(props.total / props.itemsPerPage)); + } + return { updateValue, goPrev, - goNext + goNext, + goFirst, + goLast }; } }