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


Ember Component for Bootstrap 3 Pagination & Pager components

Note: Ember-CLI support from 1.x onward. For old globals version use v0.2.0 from Bower.

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

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

Install via ember-cli, ember install:addon pagination-pager, then use in your app.

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 if count equals 1, 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
  • pagerSpread -- Pager buttons spaced out, defaults to false
  • change -- Action that returns currentPage and previousPage, e.g.
{{pagination-pager count=count current=current change='pageChanged'}}
actions: {
  // clicking on '2' after '5' 
  pageChangedfunction (currentprevious) {
    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.