A Vue.js 2 component for simple pagination with Bootstrap layout

Last update: Jun 29, 2018

vue-bootstrap-paginator

A Vue.js 2 component for simple pagination with Bootstrap layout.

npm version

npm i --save vue-bootstrap-paginator

Narrow template

narrow template

Full template

full template

Usage

The component has the following properties:

  • page: current page
  • pages: total number of pages
  • width: maximum number of pages after which compact mode will be used
  • pageFn: a function to generate href attribute for a page, e.g.,
function pageFunction(page) {
    return `./${page}`
}

The component will emit change event with new page number when a user changes the page.

You can require the component in Vue components:

">
<template>
    <div class="parent-component">
        <pagination :page="page" :pages="totalPages" :width="20" @change="onPageChange" :pageFn="pageFn">pagination>
    div>
template>
<script>
    const Pagination = require('vue-bootstrap-paginator')
    module.exports = {
        data: () => ({
            totalPages: 15,
        }),
        components: { Pagination },
        methods: {
            onPageChange: function (page) {
                console.log('New page: %s', page)
                this.$router.push(this.pageFn(page))
            },
            pageFn: function (page) {
                return `./${page}`
            },
            handleKeyUp: function (event) {
                if (event.keyCode === 39 && this.page < this.totalPages) {
                    this.$router.push(this.pageFn(this.page + 1))
                }
                if (event.keyCode === 37 && this.page > 1) {
                    this.$router.push(this.pageFn(this.page - 1))
                }
            },
        },
        computed: {
            page: function () {
                // when route param changes, change the page
                return Number(this.$route.params.page) || 1
            },
        },
        created: function () {
            window.addEventListener('keyup', this.handleKeyUp)
        },
        beforeDestroy: function () {
            window.removeEventListener('keyup', this.handleKeyUp)
        },
    }
script>

Or you can register pagination as a global component:

const Vue = require('vue')
const Pagination = require('vue-bootstrap-pagination')
Vue.component('pagination', Pagination)

Generated HTML for full template

  • «
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • »
  • ">
    <ul class="pagination">
        <li data-v-7e3a6e65="" class="">
            <a data-v-7e3a6e65="" href="./4" aria-label="Previous">«a>
        li>
        <li data-v-7e3a6e65="" class="">
            <a data-v-7e3a6e65="" href="./1">1a>
        li>
        <li data-v-7e3a6e65="" class="">
            <a data-v-7e3a6e65="" href="./2">2a>
        li>
        <li data-v-7e3a6e65="" class="">
            <a data-v-7e3a6e65="" href="./3">3a>
        li>
        <li data-v-7e3a6e65="" class="">
            <a data-v-7e3a6e65="" href="./4">4a>
        li>
        <li data-v-7e3a6e65="" class="active">
            <a data-v-7e3a6e65="" href="./5">5a>
        li>
        <li data-v-7e3a6e65="" class="">
            <a data-v-7e3a6e65="" href="./6">6a>
        li>
        <li data-v-7e3a6e65="" class="">
            <a data-v-7e3a6e65="" href="./7">7a>
        li>
        <li data-v-7e3a6e65="" class="">
            <a data-v-7e3a6e65="" href="./6" aria-label="Next">»a>
        li>
    ul>

    Generated HTML for narrow template

  • «
  • 1
  • 4
  • 5
  • 6
  • 7
  • »
  • ">
    <ul class="pagination">
        <li data-v-7e3a6e65="" class="">
            <a data-v-7e3a6e65="" href="./4" aria-label="Previous">«a>
        li>
        <li data-v-7e3a6e65="" class="">
            <a data-v-7e3a6e65="" href="./1">1a>
        li>
        <li data-v-7e3a6e65="" class="hellip disabled">
            <span data-v-7e3a6e65="">span>
        li>
        <li data-v-7e3a6e65="" class="">
            <a data-v-7e3a6e65="" href="./4">4a>
        li>
        <li data-v-7e3a6e65="" class="active">
            <a data-v-7e3a6e65="" href="./5">5a>
        li>
        <li data-v-7e3a6e65="" class="">
            <a data-v-7e3a6e65="" href="./6">6a>
        li>
        <li data-v-7e3a6e65="" class="">
            <a data-v-7e3a6e65="" href="./7">7a>
        li>
        <li data-v-7e3a6e65="" class="">
            <a data-v-7e3a6e65="" href="./6" aria-label="Next">»a>
        li>
    ul>

    Testing

    Tested with Karma, PhantomJS, Jasmine & Jasmine-Jquery

    npm t
    

    GitHub

    https://github.com/Sobesednik/vue-bootstrap-paginator
    You might also like...

    Simple pagination component

    Vue paginatron How to Install npm install vue-paginatron --save How to use vue-paginatron exposes several scoped-slot props that you can use to get ba

    Jul 30, 2020

    A simple paginator/pagination for vue

    A simple paginator/pagination for vue

    Feb 14, 2020

    data table simplify! -- vuetable is a Vue.js component that will automatically request (JSON) data from the server and display them nicely in html table with swappable/extensible pagination component.

    Please Note! This is the previous version that works with Vue 1.x. The most up-to-date version is the Vuetable-2. If you like it, please star the Vuet

    Jul 26, 2022

    A simple pagination bar, including length Menu, i18n support, based on Vue2.x

    A simple pagination bar, including length Menu, i18n support, based on Vue2.x

    v-page · A simple pagination bar, including length Menu, i18n support, based on Vue2 Examples and Documentation Live Examples on CodePen, more exmaple

    Apr 14, 2022

    Simple Pagination For Laravel when using Inertia js with vue3

    Simple Pagination For Laravel when using Inertia js with vue3

    Nov 17, 2021

    Vue.js 2 pagination component

    Vue Pagination 2 Using Vue 3? Check out the new component Click here to see it in action. Simple, generic and non-intrusive pagination component for V

    Jul 27, 2022

    A Vue.js(v2.x+) component for creating pagination.

    A Vue.js(v2.x+) component for creating pagination.

    vuejs-paginate A Vue.js(v2.x+) component to make pagination. Inspired by react-paginate. Easy to use by providing simple api. And you can customize th

    Aug 13, 2022

    A Vue component for create a tiny pagination with Flexbox

    Tiny Pagination · A Vue component for create a tiny paginate with Flexbox Install/Usage # Install with npm $ npm i -S vue-tiny-pagination # or yarn $

    Mar 12, 2021

    Vue pagination component

    vue-ads-pagination Vue ads pagination is a vue js pagination component. On the left side you find some information about the shown items. On the right

    Jul 19, 2022
    Sliding Pagination for Vue - ARIA-friendly pagination component with a sliding window
     Sliding Pagination for Vue - ARIA-friendly pagination component with a sliding window

    Sliding Pagination for Vue - ARIA-friendly pagination component with a sliding window

    Nov 21, 2021
    A advanced, smart, highly customizable Vue pagination component for Laravel Pagination

    Advanced-Laravel-Vue-Paginate A advanced, smart, highly customizable vue pagination component for Laravel Pagination Demo & Playground See https://shi

    Dec 9, 2021
    A Vue.js pagination component for Laravel paginators that works with Bootstrap

    Want your logo here? Sponsor me on GitHub Laravel Vue Pagination A Vue.js pagination component for Laravel paginators that works with Bootstrap. Requi

    Aug 17, 2022
    A lightweight and customizeable Bootstrap Pagination for Vue

    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 inst

    Sep 10, 2020
    Simple Vue Pagination component that can be used in any project with range & ui customization
    Simple Vue Pagination component that can be used in any project with range & ui customization

    Vue Tailwind Pagination Simple Vue Pagination component that can be used in any

    May 16, 2022
    Simple unstyled Vue pagination component

    Simple unstyled Vue pagination component

    Feb 27, 2020
    Simple pagination component for Vue.js
    Simple pagination component for Vue.js

    Features & characteristics: No dependencies Very lean and simple Configurable (see props list below) Props list :currentPage used to choose a current

    Feb 22, 2022
    Simple pagination component for Vue.js

    Vue.js simple pagination Simple pagination component for Vue.js About It takes the number of pages (pages), current page (currentpage) and a function

    May 31, 2022
    Simple, generic and non-intrusive pagination component for Vue.js 2

    Vue Pagination 2 Note: This package is for use with Vuejs 2. For version 1 please use v-pagination instead. Simple, generic and non-intrusive paginati

    Jun 21, 2017
    A simple pagination component for Vue.js, Based on layPage

    A simple pagination component for Vue.js, Based on layPage

    Feb 14, 2020