ember-cli-bs-pagination

A simple pagination addon for ember.js, which renders bootstrap-based pagination links.

Usage no npm install needed!

<script type="module">
  import emberCliBsPagination from 'https://cdn.skypack.dev/ember-cli-bs-pagination';
</script>

README

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.