Awesome

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