Never Publish Malarkey

    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> 

    Install

    npm i vs-pagination

    DownloadsWeekly Downloads

    57

    Version

    1.0.1

    License

    MIT

    Unpacked Size

    246 kB

    Total Files

    6

    Last publish

    Collaborators

    • kingzez