mirror of https://github.com/nocodb/nocodb
You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
85 lines
2.1 KiB
85 lines
2.1 KiB
2 years ago
|
<script setup lang="ts">
|
||
|
|
import type { PaginatedType } from 'nocodb-sdk'
|
||
|
|
import type { Ref } from 'vue'
|
||
|
|
import { computed, inject } from 'vue'
|
||
|
|
|
||
|
|
const paginatedData = inject<Ref<PaginatedType>>('paginatedData')
|
||
|
|
const count = computed<number>(() => {
|
||
|
|
return paginatedData?.value?.totalRows ?? Infinity
|
||
|
|
})
|
||
|
|
const size = computed<number>(() => {
|
||
|
|
return paginatedData?.value?.pageSize ?? 25
|
||
|
|
})
|
||
|
|
const page = computed<number>(() => {
|
||
|
|
return paginatedData?.value?.page ?? 1
|
||
|
|
})
|
||
|
|
/*
|
||
|
|
export default {
|
||
|
|
name: 'Pagination',
|
||
|
|
props: {
|
||
|
|
count: [Number, String],
|
||
|
|
value: [Number, String],
|
||
|
|
size: [Number, String],
|
||
|
|
},
|
||
|
|
data: () => ({
|
||
|
|
page: 1,
|
||
|
|
}),
|
||
|
|
watch: {
|
||
|
|
value(v) {
|
||
|
|
this.page = v
|
||
|
|
},
|
||
|
|
count(c) {
|
||
|
|
const page = Math.max(1, Math.min(this.page, Math.ceil(c / this.size)))
|
||
|
|
if (this.value !== page) {
|
||
|
|
this.$emit('input', page)
|
||
|
|
}
|
||
|
|
},
|
||
|
|
},
|
||
|
|
mounted() {
|
||
|
|
this.page = this.value
|
||
|
|
},
|
||
|
|
}
|
||
|
|
*/
|
||
|
|
</script>
|
||
|
|
|
||
|
|
<template>
|
||
|
|
{{ paginatedData }}
|
||
|
|
|
||
|
|
<div class="d-flex align-center">
|
||
|
|
<span v-if="count !== null && count !== Infinity" class="caption ml-2"> {{ count }} record{{ count !== 1 ? 's' : '' }} </span>
|
||
|
|
<v-spacer />
|
||
|
|
<v-pagination
|
||
|
|
v-if="count !== Infinity"
|
||
|
|
v-model="page"
|
||
|
|
style="max-width: 100%"
|
||
|
|
:length="Math.ceil(count / size)"
|
||
|
|
:total-visible="8"
|
||
|
|
color="primary lighten-2"
|
||
|
|
class="nc-pagination"
|
||
|
|
@input="$emit('input', page)"
|
||
|
|
/>
|
||
|
|
<div v-else class="mx-auto d-flex align-center mt-n1" style="max-width: 250px">
|
||
|
|
<span class="caption" style="white-space: nowrap"> Change page:</span>
|
||
|
|
<v-text-field
|
||
|
|
v-model="page"
|
||
|
|
class="ml-1 caption"
|
||
|
|
:full-width="false"
|
||
|
|
outlined
|
||
|
|
dense
|
||
|
|
hide-details
|
||
|
|
type="number"
|
||
|
|
@keydown.enter="$emit('input', page)"
|
||
|
|
>
|
||
|
|
<template #append>
|
||
|
|
<x-icon tooltip="Change page" small icon.class="mt-1" @click="$emit('input', page)"> mdi-keyboard-return </x-icon>
|
||
|
|
</template>
|
||
|
|
</v-text-field>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<v-spacer />
|
||
|
|
<v-spacer />
|
||
|
|
</div>
|
||
|
|
</template>
|
||
|
|
|
||
|
|
<style scoped></style>
|