v-pagy v1.0.2

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

props

options

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.