Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/knownasilya/pagination-pager
Ember.js Component for Bootstrap 3 pagination & pager components
https://github.com/knownasilya/pagination-pager
bootstrap ember ember-addon pagination pagination-pager web-component
Last synced: 4 days ago
JSON representation
Ember.js Component for Bootstrap 3 pagination & pager components
- Host: GitHub
- URL: https://github.com/knownasilya/pagination-pager
- Owner: knownasilya
- License: mit
- Created: 2014-03-21T16:42:31.000Z (almost 11 years ago)
- Default Branch: master
- Last Pushed: 2023-07-18T23:20:56.000Z (over 1 year ago)
- Last Synced: 2025-01-02T01:43:24.619Z (10 days ago)
- Topics: bootstrap, ember, ember-addon, pagination, pagination-pager, web-component
- Language: JavaScript
- Homepage: http://knownasilya.github.io/pagination-pager/
- Size: 5.55 MB
- Stars: 58
- Watchers: 4
- Forks: 21
- Open Issues: 18
-
Metadata Files:
- Readme: README.md
- Changelog: CHANGELOG.md
- Contributing: CONTRIBUTING.md
- License: LICENSE.md
Awesome Lists containing this project
README
# pagination-pager
[![NPM][npm-badge-img]][npm-badge-link]
[![Build Status][travis-badge]][travis-badge-url]
[![Ember Observer Score][ember-observer-badge]][ember-observer-url]
Ember Component for Bootstrap 3 Pagination & Pager components
```hbs
```
Here's a [demo][1], and these are the original Bootstrap Components: [Pagination][2] and [Pager][3].
## Compatibility
- Ember.js v3.12 or above
- Ember CLI v2.13 or above
- Node.js v10 or above
## Getting Started
First install the addon.
```sh
ember install pagination-pager
```
Then use it in your app with `` 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 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`.
#### 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
- `@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
```hbs
Page {{current}} of {{count}}
```
#### Actions
- `@change` -- Action that returns `currentPage` and `previousPage`, e.g.
```hbs
```
```js
// clicking on '2' after '5'
@action
pageChanged(current, previous) {
console.log(current, previous);
// => 2, 5
}
```
> **Note:** If `changed` is defined, then `current` 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:
See the [Contributing](CONTRIBUTING.md) guide for details.
```no-highlight
ember github-pages:commit --message
```
[1]: http://knownasilya.github.io/pagination-pager/
[2]: http://getbootstrap.com/components/#pagination
[3]: http://getbootstrap.com/components/#pagination-pager
[npm-badge-img]: https://badge.fury.io/js/pagination-pager.svg
[npm-badge-link]: http://badge.fury.io/js/pagination-pager
[travis-badge]: https://travis-ci.org/knownasilya/pagination-pager.svg
[travis-badge-url]: https://travis-ci.org/knownasilya/pagination-pager
[ember-observer-badge]: http://emberobserver.com/badges/pagination-pager.svg
[ember-observer-url]: http://emberobserver.com/addons/pagination-pager