Pagination

Visitors orient themselves in large result sets and return to a stable URL for a given page. Content authors usually turn pagination on in the parent component (news list, faceted search, directory, and similar), not via a separate “Pagination” block. Visual designers keep numbered links legible and current page obvious; avoid hiding all navigation on mobile.

There are three main mechanisms:

1. Server-rendered HTML string from QueryService.getPageNavigation(...): used by news list pagination.jsp, individual profile list (via paginationHtml in the model), faculty profile search, and any JSP that includes news-events/news-list/pagination.jsp. Output is a <ul class="pagination"> with list items such as first, prev, numbered, current, next, last, and anchor links that preserve the query string (with page updated).
2. HTL templates for directory person and department search: pagination.html beside each component, same outer ul.pagination idea but English labels like “First”, “Previous” in markup (see Code).
3. Thunderstone faceted search: results include a .pagination list; tfs.js intercepts clicks on .c-tfs__results .pagination li a for AJAX behaviour and syncs the page query parameter.

Authors typically enable pagination through the parent component dialog (for example “Paginate” on news, “Show pagination” on Thunderstone faceted search, or Zotero), not through a standalone Pagination component.

1. List container: <ul class="pagination"> (flex-wrap supported in site LESS).
2. Items: <li> with a class that describes the control (first, prev, numbered, current, next, last, or directory variants).
3. Links: <a href="?page=…"> with optional data-page for scripting; current page may link to #results_top with aria-current="true" on the li (QueryService).

(Placeholder asset: add a screenshot or diagram of the numbered strip and First / Previous / Next / Last.)

There is no dedicated “Pagination” dialog. Relevant options live on parents, for example:

• When a list or grid would be too long on one screen and URL-based page state (?page=) is acceptable for sharing and back/forward.
• When the parent component already supports pagination in its dialog.

• For short lists where pagination adds noise; consider “show all” or a shorter default page size in the parent.
• When infinite scroll or “load more” is a deliberate UX choice (not implemented by this shared pagination).

Do

• Keep query string preservation consistent when adding new filters so QueryService or HTL urlParams still round-trip with page.
• Place pagination after the result list so tab order and screen reader order follow “results, then navigation”.
• For Thunderstone faceted flows, test filter change and page change together (tfs.js resets pagination when filters change).

Don't

• Don’t hand-roll a second pagination pattern on the same result set.
• Don’t remove aria-current from the current page item when using QueryService output without replacing it.

Align pagination controls

• Canonical visual: The site uses ul.pagination with links inside list items, styled under #boot in pagination.less (borders, hover, current in bold). That is not the same as Bootstrap 5’s page-item / page-link class pairing, though Bootstrap pagination variables exist in the vendor bundle.
• Recommendation: In Figma, spec one pagination strip (spacing, typography, current page treatment) and map it to the existing pagination.less rules. If you migrate markup to Bootstrap 5 nav classes, update both QueryService output and directory HTL in one initiative so authors do not see two different chrome styles.

How the current implementation compares to DS expectations

• Strengths: Shared apps.concordia.pagination clientlib is embedded in concordia-master-clientlibs; most server-driven lists reuse one getPageNavigation implementation; i18n for First / Previous / Next / Last in QueryService; debug comments can expose counts for authors in edit mode.
• Gaps: Directory HTL uses fixed English strings in anchors for some labels, while QueryService uses i18n; that can diverge in bilingual experiences. Markup is legacy list shape, not full Bootstrap 5 pagination components, so focus ring behaviour may differ from other nav components unless tested. Thunderstone faceted relies on JS for partial updates; visual parity depends on result templates including the same ul.pagination structure.