Pagination (Data Tables)

Required Elements

Five attribute markers must be present for pagination to work. Place them inside your list container.

• data-ms-code="list-pagination" — the outer wrapper for the whole pagination bar. The script hides this entire wrapper automatically when there's only one page
• data-ms-code="list-prev" — the Previous link or button. The script attaches a click handler and dims it (opacity: 0.4; pointer-events: none) when the user is on page 1
• data-ms-code="list-next" — the Next link or button. Same disabled treatment when the user is on the last page
• data-ms-code="list-page-buttons" — the inner container that holds the numbered page buttons. The script appends cloned buttons here
• data-ms-code="list-page-btn-template" — a single numbered button used as the template. The script clones it once per visible page, then hides the original. Always include style="display:none" on the template defensively

How the Script Renders Buttons

Instead of rendering one button per page (which gets unwieldy past ~20 pages), the dedicated scripts uses condensed pagination. The first page, last page, current page, and a configurable number of "sibling" pages around the current page are shown; the rest are replaced with … ellipses.

• 5 pages, current = 3 → shows 1 2 [3] 4 5 (no condensing — too few pages)
• 20 pages, current = 1 → shows [1] 2 3 4 5 … 20
• 20 pages, current = 10 → shows 1 … 9 [10] 11 … 20
• 20 pages, current = 20 → shows 1 … 16 17 18 19 [20]

The number of sibling pages is controlled by PAGINATION_SIBLINGS in the script's CUSTOMIZE block (default: 1). Raise it to 2 for a roomier 1 … 8 9 [10] 11 12 … 20, or set it to 0 for a tighter 1 … [10] … 20.

Classes the Script Adds Automatically

• is-active — added to the button matching the current page so you can style it differently (bolder, filled background, etc.)
• is-ellipsis — added to the … placeholders so you can style them as non-interactive (lighter color, no hover state, no border, no padding)

Suggested CSS for the Ellipsis

The script sets pointer-events: none and opacity: 0.5 inline by default. Add this CSS so hover effects don't flicker on the ellipsis:

.list_page-btn.is-ellipsis {
cursor: default;
background: transparent;
border-color: transparent;
pointer-events: none;
}
.list_page-btn.is-ellipsis:hover {
background: transparent;
}

Minimum HTML

<div data-ms-code="list-pagination" class="list_pagination">

<a data-ms-code="list-prev" href="#" class="list_page-btn">Prev</a>

<div data-ms-code="list-page-buttons" class="list_page-buttons">
<a data-ms-code="list-page-btn-template" href="#" class="list_page-btn" style="display:none">1</a>
</div>

<a data-ms-code="list-next" href="#" class="list_page-btn">Next</a>

</div>

Common Mistakes

• The template button is outside list-page-buttons — the script appends clones into the page-buttons container, so the template must be a child of it
• The template has no text content or visible label — make sure it has either direct text (e.g. 1) or a <div> child that holds the page number
• Forgetting style="display:none" on the template — without it, the unhidden template flashes briefly on page load before the script hides it
• Hand-coding multiple page buttons in the HTML — only one template is needed; the script clones it for each page
• Putting the pagination bar outside the list container — it must live inside the same container the script initializes (list-container for tables, ms-code-table="..." wrapper for the card list)

Where Pagination Is Used

• Card List View — pagination lives inside the ms-code-table wrapper, alongside the list-container
• Table List View — pagination lives inside the data-ms-code="list-container" wrapper, after the <table>
• Kanban Board — does not use pagination because all records are loaded into columns at once
• Custom lists — drop the pagination block inside any container that the list script initializes; the same attributes work everywhere