Skip to content

roberttaraya/get-pagination

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

8 Commits
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

Published on webcomponents.org

<get-pagination>

A bootstrap-like pagination component

Install

Install the component using Bower:

$ bower install --save roberttaraya/get-pagination

Usage

This component requires 4 properties, and 1 event listener, to work:

<em-pagination
  current-page="[[currentPage]]"
  page-size="[[pageSize]]"
  total-count="[[totalCount]]"
  total-pages="[[totalPages]]"></em-pagination>

current-page: current page of the list of pages of records
page-size: number of records listed per page
total-count: total number of records
total-pages: the total number of pages of records

<em-pagination> fires an event when a page number is clicked on the pagination component. The event notifies the parent component which page number was clicked. You will also need to implement an event handler in the parent component that listens for the event fired by <em-pagination>. The parent component will then use that page number to fetch the corresponding page data. An example is shown below:

listeners: {
   'paginator-select-page': "handlePaginatorSelectPage",
},

handlePaginatorSelectPage: function(e, currentPage) {
  e.preventDefault();
  this.handleFetchPageData(currentPage)
},

Contributing

  1. Fork it!
  2. Create your feature branch: git checkout -b my-new-feature
  3. Commit your changes: git commit -am 'Add some feature'
  4. Push to the branch: git push origin my-new-feature
  5. Submit a pull request :D

License

MIT License