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

Last update: Apr 14, 2022

v-page · circle ci code coverage npm version license npm download JavaScript Style Guide

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

v-page

Examples and Documentation

Live Examples on CodePen, more exmaples and documentation please visit below sites

The jQuery version: bPage

Installation

npm i -S v-page

Include and install plugin in your main.js file.

// add component in global scope as plugin
import Vue from 'vue'
import Page from 'v-page'
Vue.use(Page, {
  global config options
})

You also can use v-page in local component

<template>
  <v-page></v-page>
</template>

<script>
import { Page } from 'v-page'
export default {
  components: {
    'v-page': Page
  }
}
</script>

Usage

<template>
  <v-page
    :total-row="totalRow"
    @page-change="pageChange"
  ></v-page>
</template>

<script>
export default {
  data () {
    return {
      totalRow: 100 // required option
    }
  },
  methods: {
    // receive page info change callback
    pageChange (pInfo) {
      console.log(pInfo) // { pageNumber: 1, pageSize: 10 }
    }
  }
}
</script>

Vue plugin series

Plugin Status Description
v-page npm version A simple pagination bar, including length Menu, i18n support
v-dialogs npm version A simple and powerful dialog, including Modal, Alert, Mask and Toast modes
v-tablegrid npm version A simpler to use and practical datatable
v-uploader npm version A Vue2 plugin to make files upload simple and easier,
you can drag files or select file in dialog to upload
v-ztree npm version A simple tree for Vue2, support single or multiple(check) select tree,
and support server side data
v-gallery npm version A Vue2 plugin make browsing images in gallery
v-region npm version A simple region selector, provide Chinese administrative division data
v-selectpage npm version A powerful selector for Vue2, list or table view of pagination,
use tags for multiple selection, i18n and server side resources supports
v-suggest npm version A Vue2 plugin for input suggestions by autocomplete
v-playback npm version A Vue2 plugin to make video play easier
v-selectmenu npm version A simple, easier and highly customized menu solution

GitHub

https://github.com/TerryZ/v-page
Comments
  • 1. How to update page number size

    Is there any way to update the page number size? As I can see in the docs we can only see 3 or 5 pages at a time. I don't know how we have handled this. but is there any way to update the page number size to 6 or anything else? Please let me know if I am missing anything. Thanks.

    image

    I have created a demo here. https://codepen.io/aniket-kale/pen/KKvqwZx

    Reviewed by aniket-kale at 2021-10-27 16:15
  • 2. Page Length

    hello guys, I have seen page length that limit 10, 20, 50, 100, but I want to add one is All that mean, it show all record. please tell me can we add?

    Reviewed by phanchanra at 2022-01-19 09:44
  • 3. Remove dotted lines around active a/hyperlink tag

    When clicking page change li elements (first, page 1, page 2, etc...) the a tag leaves a dotted outline around the clicked li element like so:

    Pagination a tag outline

    This happens when a tags/hyperlinks become active.

    In the picture, the Page 2 li element is active. But as you can see, the outline only goes around 3 sides of the li element. This is true for all the li elements except the "Last" li element.

    I purpose the outline simply be removed like so:

    .div.v-pagination > ul > li > a {
        outline: none;
    }
    

    I should note: this happens in Firefox. It does not happen in Chrome.

    Reviewed by web-surfer at 2020-09-13 08:51
  • 4. Error when using in combination with Typescript

    My linter/compiler errors out when using the latest version. Here I recreated it with only an error in the editor: https://codesandbox.io/s/vue-typescript-v-page-h9voy3?file=/src/App.vue

    Module '"v-page"' has no exported member 'Page'. Did you mean to use 'import Page from "v-page"' instead?Vetur(2614)

    Reviewed by Jogai at 2022-02-23 08:57
  • 5. Unknown custom element:

    Following your documentation exactly, I can't get the component to work. I get the following message in Console.

    [Vue warn]: Unknown custom element: <v-page> - did you register the component correctly? For recursive components, make sure to provide the "name" option.

    Reviewed by oflittlemother at 2018-12-05 18:27
  • 6. how to handle dynamic value?

    I have some dynamic data, which is coming from server. I'm using axios to fetch those data. Does your library support pagination for dynamic data. I tried to apply the way you gave me 'codepen demo' from first issue. But in initial load nothing is showing! however if i use static values, the pagination is working fine.

    Reviewed by rassemdev at 2018-05-21 04:11
  • 7. language support

    hello guys, i added more language support on the language file inside node_modules>v-page but changes doesnt applied. And i changed cn language to another but same result. How can i change the language and i want to use this component little bit wider also i cant change the width. Thank you for your help.

    Reviewed by caglarsarikaya at 2020-06-24 11:33
Best and complete pagination plugin for Vue.js. Inspired in Angular Bootstrap Pagination.

vuejs-uib-pagination Best and complete pagination plugin for Vue.js 2.0. Inspired in Angular Bootstrap Pagination. Not Using Bootstrap? No problem! Th

Mar 23, 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 simple pagination component for Vue.js, Based on layPage

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

Feb 14, 2020
A Vue.js (v3) component to make pagination, based on vuejs-paginate.
A Vue.js (v3) component to make pagination, based on vuejs-paginate.

vuejs-paginate-next A Vue.js (v3) component to make pagination, based on vuejs-paginate from lokyoung. Thank bverheec for his Vue.js v3 solution in is

Aug 7, 2022
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
Simple Pagination For Laravel when using Inertia js with vue3

Simple Pagination For Laravel when using Inertia js with vue3

Nov 17, 2021
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
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
A simple paginator/pagination for vue

A simple paginator/pagination for vue

Feb 14, 2020
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
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
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
VueJS pagination component
VueJS pagination component

Vue-smart-pagination A data pagination component that splits any data into pages and has many settings. All data is stored in an array and can have an

Mar 26, 2022