https://github.com/kingzez/vs-pagination

vs-pagination, a simple paginator component for Vue.
https://github.com/kingzez/vs-pagination

Last synced: about 1 month ago
JSON representation

vs-pagination, a simple paginator component for Vue.

• Host: GitHub
• URL: https://github.com/kingzez/vs-pagination
• Owner: kingzez
• Created: 2020-08-07T04:25:39.000Z (over 4 years ago)
• Default Branch: master
• Last Pushed: 2020-08-10T03:40:37.000Z (over 4 years ago)
• Last Synced: 2024-10-01T16:22:45.588Z (about 1 month ago)
• Language: Vue
• Homepage:
• Size: 1.05 MB
• Stars: 0
• Watchers: 2
• Forks: 1
• Open Issues: 0
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

        
# vs-pagination

![](https://flat.badgen.net/npm/v/vs-pagination)

![](https://flat.badgen.net/bundlephobia/minzip/vs-pagination)

![](https://flat.badgen.net/npm/license/vs-pagination)

![](https://flat.badgen.net/npm/dt/vs-pagination)

vs-pagination, a simple paginator component for Vue. Compared with other popular paginator, vs-pagination doesn't require total page or count, which leads counting-like queries on backend for each paged request.

Although there're few approaches to avoid such redundant query against to database, in most CRUD kinda applications, users don't care about how many pages or records in a given list view, they just go-to-next and so forth till there's no data shown.

![](screenshot.gif)

## Installation

```bash

npm install vs-pagination -S

# or with yarn

yarn add vs-pagination

```

## Usage

### Local import

Import component at view page.

```js

import VsPagination from 'vs-pagination'

export default {

  components: {

    VsPagination

  }

}

```

### Global import

import component at main.js.

```js

import VsPagination from 'vs-pagination'

Vue.use(VsPagination)

```

In template.

```html

```

Set pagination data

```js

export default {

  data() {

    return {

      pageNo: 1,

      pageSize: 20,

      list: []

    }

  }

}

```

## API

### Attributes

| Attribute           | Effect                   | Type   | Require | Default                                |

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

| page-no             | page number              | Number | Yes     | -                                      |

| page-size           | page size                | Number | Yes     | -                                      |

| current-page-length | current page list length | Number | Yes     | -                                      |

| size                | paginator size           | String | No      | small (accepted values: small / large) |

| color               | paginator color          | String | No      | #1890ff (blue)                         |

### Methods

| Method         | Effect                            | Parameters               |

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

| current-change | triggers when page number changed | Function(currentPage) {} |

## Example

Full code.

```html

  import VsPagination from 'vs-pagination'

  export default {

    name: 'App',

    components: {

      VsPagination

    },

    data() {

      return {

        pageNo: 1,

        pageSize: 20,

        list: []

      }

    },

    methods: {

      async fetchList() {},

      onPageChanged(currentPage) {

        this.pageNo = currentPage

        this.fetchList()

      }

    }

  }

```