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 1 month ago
JSON representation

Vue paginate with return your data

Lists

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'|