Best and complete pagination plugin for Vue.js. Inspired in Angular Bootstrap Pagination.

Last update: Mar 23, 2022

vuejs-uib-pagination

Best and complete pagination plugin for Vue.js 2.0. Inspired in Angular Bootstrap Pagination.

Not Using Bootstrap?

No problem! The plugin template is not 100% Bootstrap dependent, that is why you can build your own styles for your pagination!

Demo

Click here.

Installation

$ npm install vuejs-uib-pagination

Quick Start

Global:

<script src="node_modules/vue/dist/vue.js"></script>
<script src="node_modules/vuejs-uib-pagination/dist/vuejs-uib-pagination.js"></script>

CommonJS:

var Vue = require("vue");
var pagination = require("vuejs-uib-pagination");

Vue.use(pagination);

ES2015:

import * as Vue from "vue";
import pagination from "vuejs-uib-pagination";

Vue.use(pagination);

Use

HTML:

<div id="app">
    <div is="uib-pagination" v-model="pagination" :total-items="22"></div>
    <!-- or -->
    <uib-pagination v-model="pagination" :total-items="22"></uib-pagination>
</div>

Script:

var app = new Vue({
    el: "#app",
    data: {
        pagination: { }
    }
});

Settings

The settings are almost the same as Angular Bootstrap Pagination, there are only 3 differences:

  • v-model is an object and has these keys:
  • page-label does not accept expressions, it works with functions.
  • template-url is not supported.

boundary-links

(Default: false) - Whether to display First / Last buttons.

<div is="uib-pagination" v-model="pagination" :boundary-links="false"></div>

boundary-link-numbers

(Default: false) - Whether to always display the first and last page numbers. If max-size is smaller than the number of pages, then the first and last page numbers are still shown with ellipses in-between as necessary. NOTE: max-size refers to the center of the range. This option may add up to 2 more numbers on each side of the displayed range for the end value and what would be an ellipsis but is replaced by a number because it is sequential.

<div is="uib-pagination" v-model="pagination" :boundary-link-numbers="false"></div>

direction-links

(Default: true) - Whether to display Previous / Next buttons.

<div is="uib-pagination" v-model="pagination" :direction-links="true"></div>

first-text

(Default: First) - Text for First button.

<div is="uib-pagination" v-model="pagination" first-text="First"></div>

force-ellipses

(Default: false) - Also displays ellipses when rotate is true and max-size is smaller than the number of pages.

<div is="uib-pagination" v-model="pagination" :force-ellipses="false"></div>

items-per-page

(Default: 10) - Maximum number of items per page. A value less than one indicates all items on one page.

<div is="uib-pagination" v-model="pagination" :items-per-page="10"></div>

last-text

(Default: Last) - Text for Last button.

<div is="uib-pagination" v-model="pagination" last-text="Last"></div>

max-size

(Default: null) - Limit number for pagination size.

<div is="uib-pagination" v-model="pagination" :max-size="7"></div>

next-text

(Default: Next) - Text for Next button.

<div is="uib-pagination" v-model="pagination" next-text="Next"></div>

change

This can be used to call a function whenever the page changes.

<div is="uib-pagination" v-model="pagination" @change="someFunction"></div>

disabled

(Default: false) - Used to disable the pagination component.

<div is="uib-pagination" v-model="pagination" :disabled="false"></div>

v-model

(Required)

  • pagination (Default: 1) - Current page number. First page is 1.
  • numPages (Readonly) - Total number of pages to display.
<div is="uib-pagination" v-model="pagination"></div>

page-label

(Default: identity) - Override the page label based on passing the current page indexes. Supports page number with a paramenter.

<div is="uib-pagination" v-model="pagination" :page-label="someFunction"></div>

previous-text

(Default: Previous) - Text for Previous button.

<div is="uib-pagination" v-model="pagination" previous-text="Previous"></div>

rotate

(Default: true) - Whether to keep current page in the middle of the visible ones.

<div is="uib-pagination" v-model="pagination" :rotate="true"></div>

total-items

Total number of items in all pages.

<div is="uib-pagination" v-model="pagination" :total-items="72"></div>

Inspiration

Give people comming from Angular.js major facility to use pagination.

License

MIT

GitHub

https://github.com/sant123/vuejs-uib-pagination
Comments
  • 1. Could not find a declaration file for module 'vuejs-uib-pagination'.

    This library looks really good except that I'm not sure how to implement it in my Typescript project. The linter is putting out the following message:

    Could not find a declaration file for module 'vuejs-uib-pagination'. '/Project root/node_modules/vuejs-uib-pagination/dist/vuejs-uib-pagination.js' implicitly has an 'any' type. Try npm install @types/vuejs-uib-pagination if it exists or add a new declaration (.d.ts) file containing declare module 'vuejs-uib-pagination';

    I tried installing from @types to no avail.

    Any thoughts or should I find a different library? Thank you in advance

    Reviewed by robmontesinos at 2018-10-27 22:59
  • 2. Add "page-label" property support to render raw html

    Hi

    I would like to know if there's an option to render raw HTML when using page-label. That's because I need to render an icon instead of a number while retrieving data from the server.

    Willing to help on this as needed.

    Thank you very much.

    Reviewed by feload at 2017-10-24 20:41
  • 3. How to apply the pagination

    I'm not sure how to implement this on my app. Let's say I have an array of items called Items how would I implement this plugin to work on my Items array?

    Reviewed by vrrb at 2020-12-21 15:25
  • 4. '›' can't be unescaped to HTML

    Hi! When I use this plugin in template, the text like '›' can't be unescaped to HTML. The code is <uib-pagination @change="fetch(pagination.currentPage)" :boundary-links="true" :total-items="totalItems" v-model="pagination" class="pagination-sm" previous-text="&lsaquo;" next-text="&rsaquo;" first-text="&laquo;" last-text="&raquo;" :max-size="5" :rotate="true" :force-ellipses="true"></uib-pagination>

    and the result is like this html

    Reviewed by jihonghai at 2017-05-15 14:57
  • 5. Incorrect use of role attribute on page list items

    Currently: <ul> has no role attribute <li> items have role="menu"

    Expected <ul> should have role="menu" <li> items have role="menuitem"

    Reviewed by hidanielle at 2017-10-02 19:11
  • 6. [error] The build requres template compiler in project

    When i try to use the plugin, Vue gives me this error:

    You are using the runtime-only build of Vue where the template compiler is not available. Either pre-compile the templates into render functions, or use the compiler-included build.

    I use vue-cli webpack template with option:

    Runtime-only: about 6KB lighter min+gzip, but templates (or any Vue-specific HTML) are ONLY allowed in .vue files - render functions are required elsewhere

    Reviewed by stefan-angelov at 2017-06-06 10:29
  • 7. dynamic total-items

    Is there any watcher for total-items property ? I'm changing it dynamically and it is not responding, I have checked the source files and haven't found any watcher for this

    Reviewed by GioBakradze at 2017-05-17 05:47
  • 8. Role attribute fix.

    • Some libraries removed.
    • Adjust in scripts convention.
    • Update in ES6 demo.
    • Added webpack config environments.
    • Role attribute convention fixed for bootstrap template.
    Reviewed by sant123 at 2017-10-05 06:06
  • 9. Fix in change page event

    • [x] Add cross-env for dev and prod builds
    • [x] Adjust indentation in js global demo
    • [x] Fixed bug "Change event fired when no "currentPage" is set"

    Issue https://github.com/sant123/vuejs-uib-pagination/issues/6

    Reviewed by sant123 at 2017-07-17 01:11
  • 10. Change event fired when no "currentPage" is set.

    pagination1: {
        // currentPage: 4
    },
    pageChanged: function () {
        console.log('Page changed to: ' + this.pagination1.currentPage);
    }
    

    Expected pageChanged should not be fired.

    Actual pageChanged is being fired.

    Reviewed by sant123 at 2017-07-16 07:58
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
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 Vue.js 2 component for simple pagination with Bootstrap layout
A Vue.js 2 component for simple pagination with Bootstrap layout

vue-bootstrap-paginator A Vue.js 2 component for simple pagination with Bootstrap layout. npm i --save vue-bootstrap-paginator Narrow template Full te

Jun 29, 2018
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
This package is a complete rewrite of vue-paintable

@paintable/vue This package is a complete rewrite of vue-paintable

Jan 27, 2021
A Vue.js plugin to easily integrate pagination.
A Vue.js plugin to easily integrate pagination.

Vue.js Paginator A Vue.js plugin to easily integrate pagination in your projects. VueJs Paginator is a simple but powerful plugin since it gives you a

Jun 13, 2022
A sortable and searchable table, as a Vue component, using bootstrap styling.

vue-bootstrap-table vue-bootstrap-table is a sortable and searchable table, with Bootstrap styling, for Vue.js. VUE 1 : 1.1.8 Vue 2 : jbaysolutions/vu

Jul 15, 2022
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
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
Server-side paging component in vue, template based on bootstrap

vue-pagination-bootstrap Server-side paging component in vue, template based on bootstrap Vue.js (tested with 2.x) Bootstrap CSS (tested with 4.x) Ins

Nov 2, 2021
SelectPage for Vue2, list or table view of pagination, use tags for multiple selection, i18n and server side resources supports
SelectPage for Vue2, list or table view of pagination,  use tags for multiple selection, i18n and server side resources supports

v-selectpage · A powerful selection plugin for Vue2, list or table view of pagination, use tags form for multiple selection, i18n and server side reso

Jul 14, 2022
A vuejs and reactjs pagination component.

pagination-js-component A vuejs and reactjs pagination component features vuejs component reactjs component previous/next page home/end page link css

Sep 25, 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
Vue component for creating Pagination using Tailwind CSS.
Vue component for creating Pagination using Tailwind CSS.

Vue component for creating Pagination using Tailwind CSS.

Jul 31, 2022
Low-level Vue pagination component
Low-level Vue pagination component

vue-lpage Low-level Vue pagination component About This is a low-level, ui-agnostic pagination component. You pass it an array of data, the current pa

Feb 11, 2022