A vuejs and reactjs pagination component.

Last update: Sep 25, 2021

pagination-js-component

Dependency Status devDependency Status Build Status: Windows Github CI npm version Downloads type-coverage

A vuejs and reactjs pagination component

features

  • vuejs component
  • reactjs component
  • previous/next page
  • home/end page

link css

">
<link rel="stylesheet" href="./node_modules/pagination-js-component/dist/pagination.min.css" />

vuejs component

gzip size

npm pagination-vue-component

import { Pagination } from "pagination-vue-component";
app.component('pagination', Pagination)

or

">
<script src="./node_modules/vue/dist/vue.min.js">script>
<script src="./node_modules/pagination-vue-component/dist/pagination-vue-component.min.js">script>
">
<pagination :total="total"
    :current="current"
    :count="count"
    @jump="jump($event)">pagination>

the online demo: https://plantain-00.github.io/pagination-js-component/packages/vue/demo

reactjs component

gzip size

npm pagination-react-component

import { Pagination } from "pagination-react-component";

or

">
<script src="./node_modules/react/umd/react.production.min.js">script>
<script src="./node_modules/react-dom/umd/react-dom.production.min.js">script>
<script src="./node_modules/pagination-react-component/dist/pagination-react-component.min.js">script>
<Pagination total={this.total}
    current={this.current}
    count={this.count}
    jump={page => this.jump(page)}>Pagination>

the online demo: https://plantain-00.github.io/pagination-js-component/packages/react/demo

properties and events of the component

name type description
total number total page count
current number current page
count number page count around current page, eg, if current is 5, count is 2, then 3 4 5 6 7 will be displayed
jump (page: number) => void triggered when click a page
mode number? mode

change logs

// v4 vue 2
import 'pagination-vue-component'

// v5 vue 3
import { Pagination } from "pagination-vue-component"
app.component('pagination', Pagination)
# v3
npm i pagination-js-component

# v4
npm i pagination-vue-component
npm i pagination-react-component
npm i pagination-angular-component
// v3
import "pagination-js-component/vue";
import { Pagination } from "pagination-js-component/react";
import { PaginationModule } from "pagination-js-component/angular";

// v4
import "pagination-vue-component";
import { Pagination } from "pagination-react-component";
import { PaginationModule } from "pagination-angular-component";
// v4 ">
// v3
<link rel="stylesheet" href="./node_modules/pagination-js-component/pagination.min.css" />

// v4
<link rel="stylesheet" href="./node_modules/pagination-js-component/dist/pagination.min.css" />
// v2 angular AOT:
import { PaginationModule } from "pagination-js-component/angular";

// v3 angular AOT:
import { PaginationModule } from "pagination-js-component/aot/angular";
// v2
import "pagination-js-component/vue";

// v1
import "pagination-js-component/dist/vue";

GitHub

https://github.com/plantain-00/pagination-js-component
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

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

Pagination component for Vue.js 2

vue-plain-pagination A simple pagination component for Vue. Online demo: JSFiddle (used styles from Bootstrap 4) Dependencies Vue.js 2 - progressive J

May 31, 2022

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

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

Simple unstyled Vue pagination component

Simple unstyled Vue pagination component

Feb 27, 2020

A custom Vue.js pagination component.

vue-handy-pagination A Vue.js pagination component. Providing simple API, to customize pages, color and other styles very easily. View Demo Try Demo o

Sep 22, 2020
Comments
  • 1. build(deps): bump lodash from 4.17.15 to 4.17.19

    Bumps lodash from 4.17.15 to 4.17.19.

    Release notes

    Sourced from lodash's releases.

    4.17.16

    Commits
    Maintainer changes

    This version was pushed to npm by mathias, a new releaser for lodash since your current version.


    Dependabot compatibility score

    Dependabot will resolve any conflicts with this PR as long as you don't alter it yourself. You can also trigger a rebase manually by commenting @dependabot rebase.


    Dependabot commands and options

    You can trigger Dependabot actions by commenting on this PR:

    • @dependabot rebase will rebase this PR
    • @dependabot recreate will recreate this PR, overwriting any edits that have been made to it
    • @dependabot merge will merge this PR after your CI passes on it
    • @dependabot squash and merge will squash and merge this PR after your CI passes on it
    • @dependabot cancel merge will cancel a previously requested merge and block automerging
    • @dependabot reopen will reopen this PR if it is closed
    • @dependabot close will close this PR and stop Dependabot recreating it. You can achieve the same result by closing it manually
    • @dependabot ignore this major version will close this PR and stop Dependabot creating any more for this major version (unless you reopen the PR or upgrade to it yourself)
    • @dependabot ignore this minor version will close this PR and stop Dependabot creating any more for this minor version (unless you reopen the PR or upgrade to it yourself)
    • @dependabot ignore this dependency will close this PR and stop Dependabot creating any more for this dependency (unless you reopen the PR or upgrade to it yourself)
    • @dependabot use these labels will set the current labels as the default for future PRs for this repo and language
    • @dependabot use these reviewers will set the current reviewers as the default for future PRs for this repo and language
    • @dependabot use these assignees will set the current assignees as the default for future PRs for this repo and language
    • @dependabot use this milestone will set the current milestone as the default for future PRs for this repo and language

    You can disable automated security fix PRs for this repo from the Security Alerts page.

    Reviewed by dependabot[bot] at 2020-07-16 18:00
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
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
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
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
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
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