vs-pagination

1.0.1 • Public • Published

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.

Installation

npm install vs-pagination -S
# or with yarn 
yarn add vs-pagination

Usage

Local import

Import component at view page.

import VsPagination from 'vs-pagination'
 
export default {
  components: {
    VsPagination
  }
}

Global import

import component at main.js.

import VsPagination from 'vs-pagination'
Vue.use(VsPagination)

In template.

<vs-pagination
  :page-no="pageNo"
  :page-size="pageSize"
  :current-page-length="list.length"
  @current-change="onPageChanged"
/>

Set pagination data

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.

<script>
  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()
      }
    }
  }
</script> 

Versions

Current Tags

  • Version
    Downloads (Last 7 Days)
    • Tag
  • 1.0.1
    7
    • latest

Version History

Package Sidebar

Install

npm i vs-pagination

Weekly Downloads

3

Version

1.0.1

License

MIT

Unpacked Size

246 kB

Total Files

6

Last publish

Collaborators

  • kingzez