l-pagination
pagination
Demo Pagination-Plugin
Properties
Property | Type | Default | Required | Description |
---|---|---|---|---|
totalPage | Number | True | Total number of rows in the dataset | |
perPage | Number | True | Number of rows per page | |
initialPage | Number | True | Number of rows initial page | |
pills | Boolean | False | False | Applies pill styling to the pagination buttons |
size | String | md | False | Size of the rendered buttons |
pageRange | Number | 3 | False | Range of pages which displayed |
breakText | String | ... | False | Text for the break view indicator |
marginPage | Number | 2 | False | The number of displayed pages for margins |
Vue
data() {
return {
currentPage: 1,
perPage: 3,
totalPage: 0,
pills: false,
size: "md",
pageRange: 3,
marginPages: 2,
breakText: "...",
};
},
methods: {
changePage(page) {
this.currentPage = page;
}
}
Props
<Pagination
:totalPage="totalPage"
:perPage="perPage"
:initialPage="currentPage"
@changePage="changePage"
:pills="pills"
:size="size"
:pageRange="pageRange"
:breakText="breakText"
:marginPages="marginPages"
/>
Emit
<Pagination @changePage="changePage"/>
Project setup
npm install
Compiles and hot-reloads for development
npm run serve
Compiles and minifies for production
npm run build
Lints and fixes files
npm run lint