pagination-pager
Ember Component for Bootstrap 3 Pagination & Pager components
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 |
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, requiredcurrent
-- The current page number, required
Optional
pager
-- Switches to the pager component, defaults tofalse
urlTemplate
-- Url template for supporting opening pages in new windows, defaults to '#'.urlTemplate
should be in the form ofhttp://myurl.com/#/posts?page={current}
.hide
-- Hide the component for any reason, defaults tofalse
.autoHide
-- Hide the component ifcount
is <=1
, defaults totrue
.disabled
-- Disable changing the pages, defaults tofalse
.
Pagination Only
paginationNext
-- The text to display for pagination next buttonpaginationPrevious
-- The text to display for pagination previous buttonpaginationSize
-- The size of the element, default is '', available options includelg
andsm
.countOut
-- The number of page links in the begin and end of whole rangecountIn
-- The number of page links on each side of current page
Pager Only
pagerNext
-- The text to display for the pager next buttonpagerPrevious
-- The text to display for the pager previous buttonpagerFirst
-- 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
Actions
change
-- Action that returnscurrentPage
andpreviousPage
, e.g.
actions: {
// clicking on '2' after '5'
pageChanged(current, previous) {
console.log(current, previous);
// => 2, 5
}
}
Note: If
changed
is defined, thencurrent
isn't updated automatically, it's your job to update it.
Testing
ember test
works just fine, plus ember serve
and then visit 'http://localhost:4200/pagination-pager/' to see the dummy app.
Building Demo (Github Pages)
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>