https://github.com/Sitronik/v-paginator

Simple page-by-page navigation for Vue.js based on your html templates with ssr support
https://github.com/Sitronik/v-paginator

Last synced: about 1 month ago
JSON representation

Simple page-by-page navigation for Vue.js based on your html templates with ssr support

• Host: GitHub
• URL: https://github.com/Sitronik/v-paginator
• Owner: Sitronik
• Created: 2021-02-19T21:35:31.000Z (over 3 years ago)
• Default Branch: master
• Last Pushed: 2021-06-03T20:43:36.000Z (about 3 years ago)
• Last Synced: 2024-03-29T18:02:58.009Z (2 months ago)
• Language: JavaScript
• Homepage: https://sitronik.github.io/v-paginator/
• Size: 271 KB
• Stars: 2
• Watchers: 2
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md

Lists

• awesome-vue - v-paginator - Simple page-by-page navigation for Vue.js based on your html templates with ssr support. (Components & Libraries / UI Utilities)
• awesome-vue - v-paginator - Simple page-by-page navigation for Vue.js based on your html templates with ssr support. (Components & Libraries / UI Utilities)
• awesome-vue - v-paginator - Simple page-by-page navigation for Vue.js based on your html templates with ssr support. (Components & Libraries / UI Utilities)

README

        
# v-paginator [![npm version](https://badge.fury.io/js/v-paginator.svg)](https://badge.fury.io/js/v-paginator)

The idea behind `v-paginator` is pretty simple. All you need to do is add 6 required classes to your html template for injecting pagination functionality. 

SSR support.



[Online demo](https://sitronik.github.io/v-paginator/)

# Installation

## NPM

    npm install v-paginator

import the script:

    import VPaginator from 'v-paginator';

    

# Usage

### Register the component globally or locally:

```js

Vue.component('v-paginator', VPaginator);

```

OR

```js

...

components: {

  VPaginator

}

...

```

Example template.js:

```js

export const template = `


    

      

        

        

      

   


    


      


        

      

    


    

      

      

      

    

  
`;

```

Required classes in template:


    vue-paginator-main

    vue-paginator-prev

    vue-paginator-item

    vue-paginator-number

    vue-paginator-active

    vue-paginator-next

HTML/JS:

```js

import {template} from './template.js'; // Your template with vue-paginator classes

{

    data() {

       return {

          template,

          perPage: 2,

          total: 500 

       }    

    }

}

```

```vue

```    

## Events

| Event name | Arg Type | Description |

|---|---|---|

| `changePage` | `number` | The pagination event fires when the page changes |

## Props

| Name                                        | Type | Description |

| ----------------- | :--- | :--- |

| `total`      | `Number` | Total counf of items for pagination. **required** |

| `layout`      | `String` | Html template. **required** |

| `perPage`    | `Number` | Number of items per page. **required** |

| `active-class`      | `String` | CSS class name for active page element **default** `active` |

| `disabled-class` | `String` | CSS class name for disabled `next` or `prev` element **default** `disabled` |

| `limit-buttons`      | `Number` | Number of displayed page buttons **default** `4` |

| `query` | `Boolean` | Adds the current page to the browser address bar `?page=` **default** `false` |

# 🤝 Contributing

1. Fork this repository.

2. Create new branch with feature name.

3. Run `npm install` and `npm run dev`.

4. Create your feature.

5. Commit and set commit message with feature name.

6. Push your code to your fork repository.

7. Create pull request. 🙂

# ⭐️ Support

If you like this project, You can support me with starring ⭐ this repository.

# 📄 License

[MIT](LICENSE)

Copyright (c) 2021 Sitronik

Developed with ❤️ and ☕️