vuejs-uib-pagination

WebJar for vuejs-uib-pagination

License

License

MIT
Categories

Categories

JavaScript Languages
GroupId

GroupId

org.webjars.npm
ArtifactId

ArtifactId

vuejs-uib-pagination
Last Version

Last Version

1.0.1
Release Date

Release Date

Type

Type

jar
Description

Description

vuejs-uib-pagination
WebJar for vuejs-uib-pagination
Project URL

Project URL

http://webjars.org
Source Code Management

Source Code Management

https://github.com/sant123/vuejs-uib-pagination

Download vuejs-uib-pagination

How to add to project

<!-- https://jarcasting.com/artifacts/org.webjars.npm/vuejs-uib-pagination/ -->
<dependency>
    <groupId>org.webjars.npm</groupId>
    <artifactId>vuejs-uib-pagination</artifactId>
    <version>1.0.1</version>
</dependency>
// https://jarcasting.com/artifacts/org.webjars.npm/vuejs-uib-pagination/
implementation 'org.webjars.npm:vuejs-uib-pagination:1.0.1'
// https://jarcasting.com/artifacts/org.webjars.npm/vuejs-uib-pagination/
implementation ("org.webjars.npm:vuejs-uib-pagination:1.0.1")
'org.webjars.npm:vuejs-uib-pagination:jar:1.0.1'
<dependency org="org.webjars.npm" name="vuejs-uib-pagination" rev="1.0.1">
  <artifact name="vuejs-uib-pagination" type="jar" />
</dependency>
@Grapes(
@Grab(group='org.webjars.npm', module='vuejs-uib-pagination', version='1.0.1')
)
libraryDependencies += "org.webjars.npm" % "vuejs-uib-pagination" % "1.0.1"
[org.webjars.npm/vuejs-uib-pagination "1.0.1"]

Dependencies

There are no dependencies for this project. It is a standalone project that does not depend on any other jars.

Project Modules

There are no modules declared in this project.

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

Versions

Version
1.0.1