node package manager


{{pagination-pager}} - Ember.js Component for Bootstrap 3 pagination & pager components


Ember Component for Bootstrap 3 Pagination & Pager components

{{pagination-pager current=2 count=10}}

Here's a demo, and these are the original Bootstrap Components: Pagination and Pager.

Plugin Version Ember Version Branch
0.x Globals Version, < 1.13 NA (deprecated)
1.x < 1.13 1.2.4
2.x 1.13 master

First install the addon.

ember install pagination-pager

Then use it in your app with {{pagination-pager}} with the options in the following section.

To switch to the pager UI, set the pager attribute to true, see the optional section.

By default the first page is 1, and the last is the value of count, you can change these by setting firstPage and lastPage.

  • count -- The number of pages in total, required
  • current -- The current page number, required
  • pager -- Switches to the pager component, defaults to false
  • urlTemplate -- Url template for supporting opening pages in new windows, defaults to '#'. urlTemplate should be in the form of{current}.
  • hide -- Hide the component for any reason, defaults to false.
  • autoHide -- Hide the component if count is <= 1, defaults to true.
  • disabled -- Disable changing the pages, defaults to false.
  • paginationNext -- The text to display for pagination next button
  • paginationPrevious -- The text to display for pagination previous button
  • paginationSize -- The size of the element, default is '', available options include lg and sm.
  • countOut -- The number of page links in the begin and end of whole range
  • countIn -- The number of page links on each side of current page
  • pagerNext -- The text to display for the pager next button
  • pagerPrevious -- The text to display for the pager previous button
  • pagerFirst -- The text to display for the pager first button (no button is shown if not specified)
  • pagerLast -- The text to display for the pager last button (no button is shown if not specified)
  • pagerSpread -- Pager buttons spaced out, defaults to false
{{#pagination-pager pager=true ..}}
  <!-- This will show up between the two buttons. -->
  Page {{current}} of {{count}}
  • change -- Action that returns currentPage and previousPage, e.g.
{{pagination-pager count=count current=current change='pageChanged'}}
actions: {
  // clicking on '2' after '5' 
  pageChanged(current, previous) {
    console.log(current, previous);
    // => 2, 5 

ember test works just fine, plus ember serve and then visit 'http://localhost:4200/pagination-pager/' to see the dummy app.

Build by checking out the relevant branch, since the test dummy app is actually the demo app.

Run the following command:

ember github-pages:commit --message <message describing demo release>