Simple Pagination in Ember ArrayControllers

The post shows how to paginate a sorted Ember ArrayController by adding page and perPage, then computing paginatedContent from arrangedContent so the sort order is preserved. It also computes the total number of pages without depending on arrangedContent, since the count does not change when sorting changes.

The pagination logic is then extracted into a reusable mixin and displayed with a pagination-links component plus a pagination-page component. The component handles previous and next links, a centered window of visible pages, ellipses when needed, and actions that update controller.page.

Reading notes

#

• Add page and perPage to control which slice of the collection is shown.
• Use arrangedContent for paginatedContent so sorting still applies.
• Compute pages from content.length and perPage, since sort order does not change the item count.
• Extract paginatedContent and pages into a reusable PaginatableMixin.
• Use a pagination-links component to render the navigation controls.
• Use a separate pagination-page component to keep the template simple and avoid extra divs inside Bootstrap markup.
• Give pagination-page a li tagName and disable the current page with class bindings.
• Handle page clicks by sending actions through parentView, since component actions do not bubble.
• Build visiblePages so it shows up to five page numbers, centered on the current page when possible.
• Show ellipses before or after the visible range when the full page list is larger than the window.
• Wire next, previous, and page selection actions to controller.page.
• The computed slice is noted as less performant for very large collections because it recreates arrays and does not use arrayComputed.
• The post also notes that large datasets should be paginated on the server side as well.