v-pagy

Server-side paging component in vue, template based on bootstrap

• Vue.js (tested with 2.x)
• Bootstrap CSS (tested with 4.x)

Installation

npm install v-pagy

or via yarn

yarn add v-pagy

Example

<template lang="html">
  <pagination
    :total="total"
    :page-size="pageSize"
    :current-page="page"
    :options="options"
    @page-change="onPageChangedHandler"
    @refresh-page="onRefreshPageHandler"
    nav-class="padding-10"
    ul-class="bg-color-red"
    li-class="txt-color-blue"
  />
</template>

<script>
import pagination from 'v-pagy';

export default {
  components: {
    pagination,
  },
  props: {
    page: Number,
  },
  data() {
    return {
      total: 1000,
      pageSize: 20,
      options: { // Optional
        offset: 2,
        previousText: 'Prev',
        nextText: 'Next',
        alwaysShowPrevNext: true,
      },
    },
  },
  methods: {
    onPageChangedHandler(page) {
      console.log(page);
      // Exec your response to server passing 'page' params as clicked button paging
    },
    onRefreshPageHandler(page) {
      console.log(page);
      // Exec your response to server passing 'page' params as clicked on current active paging button
    },
  },
});
</script>

If you want to use HTML content for the first, last, previous and next button, there is some named slots. Here is an example:

<pagination
  :total="total"
  :page-size="pageSize"
  :current-page="page"
  :options="options"
  @page-change="onPageChangedHandler"
  @refresh-page="onRefreshPageHandler"
  nav-class="padding-10"
  ul-class="bg-color-red"
  li-class="txt-color-blue"
>
  <template slot="first-el">
    <span title="go first">◄◄</span>
  </template>
  <template slot="last-el">
    <span title="go last">►►</span>
  </template>
</pagination>

Events

| Event name | Arg Type | Description | |---|---|---| | page-change | number | Fire on click to the page link (except for the current one) | | refresh-page | number | Fire on click to the current page link |

props

| Name | Type | Required | Default | Description | |---|---|---|---|---| | total | Number | Yes | | Total items from server side | | pageSize | Number | Yes | | Number of items per page | | callback | Function | Yes | | The callback to be called on page changes | | currentPage | Number | | 1 | The current page from the URL params | | options | Object | | | Configurations | | navClass | String | | '' | Class will be include in nav element | | ulClass | String | | '' | Class will be include in ul element | | liClass | String | | '' | Class will be include in all li element |

options

| Name | Type | Default | Description | |---|---|---|---| | offset | Number | 2 | Left and right offset of pagination numbers to display | | ariaNext | String | 'Next' | Change default aria next text | | ariaPrevious | String | 'Previous' | Change default aria previous text | | ariaLast | String | 'Last' | Change default aria last text | | ariaFirst | String | 'First' | Change default aria first text | | previousText | String | '‹' | Change default previous button text | | nextText | String | '›' | Change default next button text | | firstText | String | '«' | Change default first button text | | lastText | String | '»' | Change default last button text | | alwaysShowPrevNext | Boolean | true | Show the prev/next button even if on the first/last page | | alwaysShowFirstLast | Boolean | true | Show first/last button even if on first/last page | | first | Boolean | true | Set false to hide the first button | | last | Boolean | true | Set false to hide the last button | | prev | Boolean | true | Set false to hide the previous button | | next | Boolean | true | Set false to hide the next button |

slots

Useful in case you want to custom the UI of the first, last, previous and next buttons by HTML elements instead of using a text.

| Name | Description | |---|---| | first-el | Custom slot for the first link | | prev-el | Custom slot for the previous link | | next-el | Custom slot for the next link | | last-el | Custom slot for the last link |