Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/alziqziq/vue-paginate-al
Vue paginate with return your data
https://github.com/alziqziq/vue-paginate-al
paginate pagination vue vuejs
Last synced: about 2 months ago
JSON representation
Vue paginate with return your data
- Host: GitHub
- URL: https://github.com/alziqziq/vue-paginate-al
- Owner: alziqziq
- Created: 2017-10-02T07:06:54.000Z (almost 7 years ago)
- Default Branch: master
- Last Pushed: 2022-12-02T15:19:38.000Z (almost 2 years ago)
- Last Synced: 2024-08-02T03:05:06.656Z (about 2 months ago)
- Topics: paginate, pagination, vue, vuejs
- Language: Vue
- Homepage:
- Size: 10.4 MB
- Stars: 52
- Watchers: 1
- Forks: 11
- Open Issues: 12
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
## Demo
[Click here](https://alziqziq.github.io/demo-vuepaginate-al/dist/index.html).## Install via NPM
```js
npm install --save vue-paginate-al
```#### Register as Plugin
```js
import Vue from 'vue'
import VuePaginateAl from 'vue-paginate-al'Vue.component('vue-paginate-al', VuePaginateAl)
```#### Usage
```vue
// example 1
// example 2 => with background color
// example 3 => with single data
// example 4 => with multiple data
import VuePaginateAl from 'vue-paginate-al'export default {
name: 'App',
components: {
VuePaginateAl
},
methods : {
goToFunction : function(n)
{
console.log(n);
},goToFuncWithData : function(n, data)
{
console.log(n, data);
},goToFuncWithMultipleData : function(n, data)
{
console.log(n, data[0], data[1]);
}
}
}
```
#### Props
|Props|Description|Type|Required|Example|
|-----|-----------|----|--------|-------|
|totalPage|Total paginate|Number|true|10|
|currentPage|Current page|Number|false|2|
|myData|For callback data without process|String|false|'myname'|
|withNextPrev|To show or hide button next/prev|Boolean|false|true|
|nextText|Text for button Next|String|false|'Next'|
|prevText|Text for button Prev|String|false|'Prev'|
|activeBGColor|Background color|String|false|'primary'|
|customActiveBGColor|Background color custom|String|false|'#bb06a9'|