Skip to content
Simple pagination links for ember apps using Bootstrap 4 markup
JavaScript HTML
Branch: master
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
addon
app
config
tests
vendor
.editorconfig
.ember-cli
.eslintrc.js
.gitignore
.npmignore
.travis.yml
.watchmanconfig
LICENSE.md
README.md
ember-cli-build.js
index.js
package.json
testem.js
yarn.lock

README.md

ember-cli-bs-pagination

A simple addon to render pagination links (using bootstrap 4 markup). What it does:

  • renders links with markup as specified by Bootstrap 4
  • sets the page variable you pass it to the clicked page (or to -1 or +1 if Previous or Next is clicked)

Assumptions:

  • The URL for the current page is the same as the paginated url

What it does not do:

  • paginate your models
  • allow you to use a zero-based index for pagination
  • update the URL (ember will do this for you when setup properly as outlined below)
  • cook you bacon

What it will do (roadmap):

  • support innerWindow argument (how many links are shown around the current page)
  • support outerWindow argument (how many links are around the first and the last page)
  • support rendering a pagination summary

What it depends on:

  • handlebars

Configuration options:

  • additionalClasses will be added to the ul.pagination node. Use pagination-sm or pagination-lg for sizing, use flexbox utilites for alignment (eg justify-content-center).
  • If you would prefer to use "actions up" instead of two-way binding for page, pass _setPage=(action mySetPageAction) and your action will receive the new value of page as an argument.

Installation & Usage

  • Install ember install ember-cli-bs-pagination

  • Tell your route that you want to refresh the model whenever the page query param changes (otherwise changing page won't call the model hook)

  • pass params when you query the store, which will have the query param page

// app/routes/items.js
export default Route.extend({
  queryParams: {
    page: { refreshModel: true },
  },
  model(params) {
    return get(this, 'store').query('item', params);
  },
})
  • Tell your controller that you want to bind the page query param to a page variable locally
  • Tell your controller the default value for page
// app/controllers/items.js
export default Controller.extend({
  queryParams: ["page"],
  page: 1,
});
  • Use the component (finally!)
{{!-- app/templates/items.hbs --}}
{{#each model do |item|}}
  {{!-- render item --}}
{{/each}}
{{page-numbers page=page totalPages=model.meta.total-pages}}

Note: meta.total-pages assumes your API returns this param properly formatted as per the JSONApi spec.

That's all!

Variations on a theme:

  • You can easily customize the view by defining your own app/components/templates/page-numbers.hbs. Look at page-numbers.hbs here for inspiration. NOTE: removing your local page-numbers.hbs file seems to confuse Ember. I've had to rm -rf node_modules/ember-cli-bs-pagination; yarn to get it working again after removing an app's local version of the template
  • You could paginate a local array of items just as easily by changing the model() hook and changing how you set totalPages
  • You can use anything you like for the page query param, say you wanted to use página, just use página in the Route & Controller setup, then pass it to the component, eg {{page-numbers page=página totalPages=totalPages}}

Collaborating

Get Started

  • fork the repo & clone it locally
  • cd ember-cli-bs-pagination
  • yarn install
  • git checkout -b my-feature-name-or-bug-fix-name
  • write some code
  • write some tests
  • submit a PR

Running Tests

  • yarn test (Runs ember try:each to test your addon against multiple Ember versions)
  • ember test
  • ember test --server
  • ember serve, then visit tests at http://localhost:4200/tests.
You can’t perform that action at this time.