demo D134
Type a page to jump to it
The pager interaction, not the paged source
pagination
The configuration
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@toclocoinc/lattice-grid@1.13.0/lattice-grid.min.css">
<script src="https://cdn.jsdelivr.net/npm/@toclocoinc/lattice-grid@1.13.0/lattice-grid.min.js"></script>
<div id="grid" style="height: 540px"></div>
<script>
const grid = LatticeGrid.createGrid(document.getElementById('grid'), {
rowKey: 'id',
pagination: { enabled: true, pageSize: 25, pageSizes: [25, 50, 100] },
columns: [
{ field: 'service', title: 'Service', layout: { pin: 'start', width: 140 } },
{ field: 'team', title: 'Team', filter: { type: 'set' } },
{ field: 'owner', title: 'Owner', filter: { type: 'set' } },
{ field: 'tier', title: 'Tier', cell: { decoration: 'pill', variant: { map: { gold: 'warning', silver: 'neutral', bronze: 'info' } } } },
{ field: 'state', title: 'State', cell: { decoration: 'dot', variant: { map: { healthy: 'success', degraded: 'warning', failing: 'danger', unknown: 'neutral' } } } },
{ field: 'region', title: 'Region', filter: { type: 'set' } },
{ field: 'active', title: 'Active', type: 'boolean' },
{ field: 'deprecated', title: 'Deprecated', type: 'boolean' },
],
rows, // 20,000 service records: 25 to a page is 800 pages
});
</script>Jumping straight to a page number in the pager
Paging through a result set one click at a time is fine for the first few pages and tedious past that, so a JavaScript data grid with a built-in pager benefits from a direct entry point: a field where a user types a page number and lands on it, rather than clicking “next” repeatedly. Lattice Grid exposes this through the pagination option, which configures the pager’s page size, current page, and the controls it renders, including the jump-to-page input alongside the previous/next and first/last buttons. The pager is a chrome element, independent of how rows are sourced, whether that is an in-memory array or a server-side row model returning one page per request.
Typing a page number and pressing return validates it against the known page count, clamping out-of-range entries rather than requesting a page that does not exist. The input carries an aria-label identifying it as a page number field, and the pager is a navigation region so assistive technology announces the current page and total. For a server-backed source, jumping to a distant page issues a single fetch for that page’s rows, so a jump from page 2 to page 400 costs the same as a jump to page 3.
How do you let users type a page number instead of clicking through a pager?
Configure the pagination option and enable the jump-to-page input in the pager controls. Lattice Grid renders a numeric field next to the standard next/previous buttons; entering a number and confirming it moves the grid directly to that page, with out-of-range values clamped to the nearest valid page rather than rejected outright.