A simple pagination component for VueJS.
$ npm install @letrungtan/vue-paginationUse the component.
import Pagination from '@letrungtan/vue-pagination'
Vue.component('pagination', Pagination)Basic Usage
<pagination
:currentPage="1"
:perPage="20"
:totalItems="123"
@pageSelected="callbackFunction"
>
</pagination>Example
<template>
<pagination
:currentPage="1"
:perPage="20"
:totalItems="123"
@pageSelected="changePage"
</pagination>
</template>
<script>
export default {
methods: {
changePage (page) => {
console.log(page);
}
}
}
</script>| Name | Type | Description |
|---|---|---|
currentPage |
Number |
Current page number. required |
perPage |
Number |
Number of item limit per page. required |
totalItems |
Number |
Number of all item available. required |
@pageSelected |
Function |
The callback function when page selected. Return page number in parameter. |
prevText |
String |
Text for the previous button. default: Prev |
nextText |
String |
Text for the next button. default: Next |
maxSize |
Number |
Max length of pagination. default: 5 |
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent