- Notifications
You must be signed in to change notification settings - Fork170
A Vue.js(v2.x+) component for creating pagination.
License
lokyoung/vuejs-paginate
Folders and files
| Name | Name | Last commit message | Last commit date | |
|---|---|---|---|---|
Repository files navigation
A Vue.js(v2.x+) component to make pagination. Inspired byreact-paginate.
Easy to use by providing simple api. And you can customize the style of this component by css.
Install the npm package.
$npminstallvuejs-paginate--save
Register the component.
- ES5
varPaginate=require('vuejs-paginate')Vue.component('paginate',Paginate)
- ES6
importPaginatefrom'vuejs-paginate'Vue.component('paginate',Paginate)
Note: For version <= 0.5.0, useVue.use(Paginate) to register the component after import the package. But recommend to use the latest version now.
Include the source file.
<!-- use the latest release --><scriptsrc="https://unpkg.com/vuejs-paginate@latest"></script><!-- or use the specify version --><scriptsrc="https://unpkg.com/vuejs-paginate@0.9.0"></script>
Register the component.
Vue.component('paginate',VuejsPaginate)
Basic Usage
<paginate:page-count="20":click-handler="functionName":prev-text="'Prev'":next-text="'Next'":container-class="'className'"></paginate>
Note: In vue template, camelCase and kebab-case are both supported. For example, you can either use proppage-count orpageCount. They are leading to the same result.
So this is also avaliable
<paginate:pageCount="20":clickHandler="functionName":prevText="'Prev'":nextText="'Next'":containerClass="'className'"></paginate>
Example
<template><paginate:page-count="20":page-range="3":margin-pages="2":click-handler="clickCallback":prev-text="'Prev'":next-text="'Next'":container-class="'pagination'":page-class="'page-item'"></paginate></template><script>exportdefault{methods:{clickCallback(pageNum)=>{console.log(pageNum)}}}</script><stylelang="css">.pagination {}.page-item {}</style>
Usev-model to set the selected page number. You can programmatically modify the current page by using this.
<template><paginatev-model="page":page-count="20":page-range="3":margin-pages="2":click-handler="clickCallback":prev-text="'Prev'":next-text="'Next'":container-class="'pagination'":page-class="'page-item'"></paginate></template><script>exportdefault{data(){return{page:10}}}</script>
Must use kebab-case for props in pure HTML.
Example
JavaScript
Vue.component('paginate',VuejsPaginate)newVue({el:'#app',methods:{clickCallback:function(pageNum){console.log(pageNum)}}})
HTML
<divid="app"><paginate:page-count="10":container-class="pagination":prev-text="prev":next-text="next":click-handler="clickCallback"></paginate></div>
| Name | Type | Description |
|---|---|---|
page-count | Number | Total count of pages.required |
page-range | Number | Range of pages which displayed.default: 3 (Note: It is recommended to use an odd number, so that the same number of pages are displayed before and after the active page. If using an even number, there will be one more page number before the active page than after the current page) |
margin-pages | Number | The number of displayed pages for margins.default: 1 |
prev-text | String | Text for the previous button. You can use HTML here.default: Prev |
next-text | String | Text for the next button. You can use HTML here.default: Next |
break-view-text | String | Text for the break view indicator.default: ... |
initial-pageDeprecated after v2.0.0 | Number | The index of initial page which selected.default: 0 |
force-page | Number | The page number of overridden selected page. |
click-handler | Function | The method to call when page clicked. Use clicked page number as parameter. |
container-class | String | CSS class name for the layout. |
page-class | String | CSS class name for tagli of each page element. |
page-link-class | String | CSS class name for taga of each page element. |
prev-class | String | CSS class name for tagli ofprevious element. |
prev-link-class | String | CSS class name for taga ofprevious element. |
next-class | String | CSS class name for tagli ofnext element. |
next-link-class | String | CSS class name for taga ofnext element. |
break-view-class | String | CSS class name for tagli ofbreak view element. |
break-view-link-class | String | CSS class name for taga ofbreak view element. |
active-class | String | CSS class name for active page element.default: active |
disabled-class | String | CSS class name for disabled page element.default: disabled |
no-li-surround | Boolean | Support noli tag surrounda tag.default: false |
first-last-button | Boolean | Support buttons to turn to the first and last page.default: false |
first-button-text | String | Text for first button. (Not visible whenfirst-last-button is false. You can use HTML here.)default: 'First' |
last-button-text | String | Text for last button. (Not visible whenfirst-last-button is false. You can use HTML here.)default: 'Last' |
hide-prev-next | Boolean | Hide prev/next button when there is no previous or next page.default: false |
You can customize the inner HTML of the previous button, next button, and break view indicator, with theslot tag.
Slot names
| Name | Description |
|---|---|
prevContent | Previous button |
nextContent | Next button |
breakViewContent | Break view indicator |
NoteSlot ofprevContent andnextContent are not supported afterv1.9.5. You can directly set the HTML byprev-text andnext-text props.
Example
<paginate:page-count="10":container-class="pagination":prev-text="prev":next-text="next":click-handler="clickCallback"><spanslot="prevContent">Changed previous button</span><spanslot="nextContent">Changed next button</span><spanslot="breakViewContent"><svgwidth="16"height="4"viewBox="0 0 16 4"><circlefill="#999999"cx="2"cy="2"r="2"/><circlefill="#999999"cx="8"cy="2"r="2"/><circlefill="#999999"cx="14"cy="2"r="2"/></svg></span></paginate>
You can see the demo for quickly understand how to use this package.
$ git clone git@github.com:lokyoung/vuejs-paginate.git$cd vuejs-paginate$ npm install$ npm run demoCheck the code from./demo/index.html and./demo/App.vue.
About
A Vue.js(v2.x+) component for creating pagination.