# Pagination
Generic pagination control, handles all the pagination logic
# State
The usePagination
function exposes the following reactive state:
import { usePagination } from "vue-composable";
const { pageSize, total, currentPage, offset, lastPage } = usePagination();
State | Type | Description |
---|---|---|
pageSize | Number | Current page size, allows to set the pageSize |
total | Number | Total elements |
currentPage | Number | Current page |
offset | Number | Current page offset from the beginning |
lastPage | Number | Last page number |
# Methods
The usePagination
function exposes the following methods:
import { usePagination } from "vue-composable";
const { next, prev, first, last } = usePagination();
Signature | Description |
---|---|
next() | Increments currentPage |
prev() | Decrements currentPage |
first() | Sets currentPage to 1 |
last() | Sets currentPage = lastPage |
# Example
page 1 of 10
- 0
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
# Code
Array pagination
<template>
<div>
<p>page {{ currentPage }} of {{ lastPage }}</p>
<p>
<button @click="prev">prev</button>
<button @click="next">next</button>
</p>
<ul>
<li v-for="n in result" :key="n">{{ n }}</li>
</ul>
</div>
</template>
<script>
import { ref, computed } from "@vue/composition-api";
import { usePagination } from "vue-composable";
export default {
name: "pagination-example",
setup() {
const arrayRef = ref(new Array(100).fill(1).map((_, i) => i));
// paginate array
const {
currentPage,
lastPage,
next,
prev,
offset,
pageSize,
} = usePagination({
currentPage: 1,
pageSize: 10,
total: computed(() => arrayRef.value.length),
});
const result = computed(() => {
const array = arrayRef.value;
if (!Array.isArray(array)) return [];
return array.slice(offset.value, offset.value + pageSize.value);
});
return {
currentPage,
lastPage,
next,
prev,
result,
};
},
};
</script>