engwan / pagination-pager

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

pagination-pager

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.

Plugin Version	Ember Version
0.x	Globals Version, < 1.13
1.x	< 1.13
2.x	1.13

Getting Started

First install the addon.

ember install pagination-pager

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

Available Options

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.

Required

• count -- The number of pages in total, required
• current -- The current page number, required

Optional

• 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 http://myurl.com/#/posts?page={current}.
• hide -- Hide the component if count equals 1, defaults to false
• disabled -- Disable changing the pages, defaults to false.

Pagination Only

• 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

Pager Only

• 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

Actions

• change -- Action that returns currentPage and previousPage, e.g.

{{pagination-pager count=count current=current change='pageChanged'}}

actions: {
  // clicking on '2' after '5'
  pageChanged: function (current, previous) {
    console.log(current, previous);
    // => 2, 5
  }
}

Testing

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