Skip to content

A lightweight and customizeable Bootstrap Pagination for Vue

Notifications You must be signed in to change notification settings

trandaison/v-pagy

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

5 Commits
 
 
 
 
 
 

Repository files navigation

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

About

A lightweight and customizeable Bootstrap Pagination for Vue

Resources

Stars

Watchers

Forks

Packages

No packages published