pagination-js-component v5.0.0

pagination-js-component

A vuejs, angular, reactjs pagination component

features

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

link css

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

vuejs component

npm pagination-vue-component

import "pagination-vue-component";

or

<script src="./node_modules/vue/dist/vue.min.js"></script>
<script src="./node_modules/vue-class-component/dist/vue-class-component.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

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

angular component

npm pagination-angular-component

import { PaginationModule } from "pagination-angular-component";

@NgModule({
    imports: [BrowserModule, FormsModule, PaginationModule],
    declarations: [MainComponent],
    bootstrap: [MainComponent],
})
class MainModule { }

<pagination [total]="total"
    [current]="current"
    [count]="count"
    (jump)="jump($event)"></pagination>

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

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

properties and events of the component

change logs

# 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";

// 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";