Pagination

Total Users: 145

Pages:

<<First
<Previous
1
2
3
4
5
...
29
Next>
Last>>

Username	Last Name	First Name	E-mail	Status
hnguyen	Nguyen	Hue	hue.nguyen@optum.demo	Active
jolsen	Olsen	Jeremy	jeremy.olsen@optum.demo	Active
nprice	Price	Natalia	natalia.price@optum.demo	Inactive
jradcliffe	Radcliffe	Jennifer	jennifer.radcliffe@optum.demo	Active
bryan	Ryan	Brendan	brendan.ryan@optum.demo	Active
msanders	Sanders	Melanie	melanie.sanders@optum.demo	Active
bsorens	Sorensen	Brian	brian.sorensen@optum.demo	Inactive
etarkington	Tarkington	Elizabeth	elizabeth.tarkington@optum.demo	Active
rtuhey	Tuhey	Richard	richard.tuhey@optum.demo	Active
svalentin	Valentino	Samantha	samantha.valentino@optum.demo	Active

Developer Notes

From a code standpoint pagination patterns above tables are part of a larger category of table-related actions (another example is buttons). The table actions should be wrapped in a div of class ux-tabl-actions, which should also get a clear-fix applied to it (ux-clear-after). This div should be immediately followed by the table.

The pagination pattern itself is also wrapped in its own div (ux-pagi). That div contains the "Showing" line, the Pages inline heading, and the pagination links. The pagination links are a generic unordered list. The list items within that unordered list should also be generic, with the exception of the first (ux-pagi-first), previous (ux-pagi-prev), selected (ux-pagi-selected), next (ux-pagi-next), and last (ux-pagi-last). View source for more details.

Important note: be sure to keep each li on its own line, as source carriage returns are treated as spaces by all browsers, and the CSS already accounts for that extra space.