MarkupPagerNav
MarkupPagerNav generates pagination navigation markup for PageArray,
PaginatedArray, and any other object implementing WirePaginatable
Most site code does not instantiate Markup directly. The common path is:
- Get a limited result set, usually with
$pages->find("selector, limit=N"). - Render the items.
- Call
$items->renderPager()or$items->renderPagination().
$items = $pages->find("template=blog-post, limit=10");
foreach($items as $item) {
echo "<article><h2>$item->title</h2></article>";
}
echo $items->renderPagination();limit=N is what makes a result paginated. It gives the returned PageArray
pagination metadata such as getTotal(), getLimit(), and getStart(). Without
a limit, ProcessWire returns the full result set and there is usually nothing for
Markup to render.
Note that to use
/page2/style pagination URLs on a rendered page, the Template used by the rendering Page must have itsallowPageNumproperty set to1. In the admin this is in: Setup > Templates > your-template > URLs > Allow Page Numbers. When page numbers are not allowed,Markupfalls back to query-string pagination likePager Nav ?page=2.
renderPager($options)
$items = $pages->find("template=blog-post, limit=10");
echo $items->renderPager([
'numPageLinks' => 5,
'listClass' => 'pagination',
]);renderPager() delegates to Markup when the module is installed.
renderPagination($options)
Alias of renderPager().
echo $items->renderPagination([
'baseUrl' => $page->url,
]);getPaginationString($label, $usePageNum)
Returns text describing the current pagination position.
echo $items->getPaginationString('Items'); // Items 1 to 10 of 100
echo $items->getPaginationString('Page', true); // Page 1 of 10
echo $items->getPaginationString([
'label' => 'Items',
'zeroLabel' => 'No items found',
]);For the full shared option reference used by renderPager() and
renderPagination(), see wire/core/PageArray/pagination-options.md.
Use the module directly when you need to render pagination for a custom
WirePaginatable object, or when you want direct access to pager state after render.
$items = $pages->find("template=blog-post, limit=10");
$pager = $modules->get('MarkupPagerNav');
echo $pager->render($items, [
'numPageLinks' => 5,
'listClass' => 'pagination',
]);
if($pager->isLastPage()) {
// The rendered pagination was on the last page.
} render(WirePaginatable $items, array $options = [])
Renders pagination markup. Returns an empty string when there is no pagination to render, such as when total items are less than or equal to the current page limit.
Pass an options array to render(), renderPager(), or renderPagination() to
override defaults. Only specify what you want to change.
echo $items->renderPagination([
'numPageLinks' => 5,
'listClass' => 'uk-pagination',
'currentItemClass' => 'uk-active',
'currentLinkMarkup' => "<span>{out}</span>",
'separatorItemLabel' => '<span>…</span>',
'separatorItemClass' => 'uk-disabled',
'nextItemLabel' => '<i class="fa fa-angle-double-right"></i>',
'previousItemLabel' => '<i class="fa fa-angle-double-left"></i>',
'nextItemClass' => '',
'previousItemClass' => '',
'lastItemClass' => '',
]);| Option | Default | Description |
|---|---|---|
numPageLinks | 10 | Number of page links shown. Values of 5 or more are recommended. |
baseUrl | '' | Base URL for pagination links. Auto-detected from the current page when empty. |
getVars | [] | GET variables to append to pagination URLs. |
page | null | Current Page, or null to auto-detect from $page. |
arrayToCSV | true | Convert array GET values to CSV in URLs, such as ?tags=a,b. When false, array values use tags[]=a&tags[]=b style. |
Pagination URLs are built from $input->whitelist() values automatically when
getVars is empty. Use getVars when you need to include specific query-string
parameters regardless of whitelist state. In either case, make sure variables are
validated before including them in the pagination URLs.
| Option | Default | Description |
|---|---|---|
listMarkup | <ul class='{class}' role='navigation' aria-label='{aria-label}'>{out}</ul> | Container markup. |
itemMarkup | <li aria-label='{aria-label}' class='{class}' {attr}>{out}</li> | Item markup. |
linkMarkup | <a href='{url}'><span>{out}</span></a> | Link markup. |
currentLinkMarkup | <a href='{url}'><span>{out}</span></a> | Current-page link markup. |
separatorItemMarkup | null | Separator markup. Falls back to itemMarkup when null. |
Tokens available in markup templates:
| Token | Available in | Description |
|---|---|---|
{out} | all markup options | Item content/label. |
{url} | linkMarkup, currentLinkMarkup | Link href URL. |
{class} | itemMarkup, listMarkup | CSS class attribute. |
{aria-label} | itemMarkup, listMarkup | ARIA label text. |
{attr} | itemMarkup | Extra attributes, such as aria-current for the current page item. |
| Option | Default | Description |
|---|---|---|
listClass | 'Markup | CSS class for the list container. |
currentItemClass | 'Markup | Current page item. |
nextItemClass | 'Markup | Next button item. |
previousItemClass | 'Markup | Previous button item. |
firstItemClass | 'Markup | First item in the rendered pager. |
lastItemClass | 'Markup | Last item in the rendered pager. |
firstNumberItemClass | 'Markup | First numbered page item. |
lastNumberItemClass | 'Markup | Last numbered page item. |
separatorItemClass | 'Markup | Separator item. |
| Option | Default | Description |
|---|---|---|
nextItemLabel | 'Next' | Next button label. |
previousItemLabel | 'Prev' | Previous button label. |
separatorItemLabel | '…' | Separator label. |
listAriaLabel | 'Pagination links' | List ARIA label. |
itemAriaLabel | 'Page {n}' | Page item ARIA label. |
currentItemAriaLabel | 'Page {n}, current page' | Current page ARIA label. |
currentItemExtraAttr | aria-current='true' | Extra attributes applied to the current page item. |
nextItemAriaLabel | 'Next page' | Next button ARIA label. |
previousItemAriaLabel | 'Previous page' | Previous button ARIA label. |
lastItemAriaLabel | 'Page {n}, last page' | Last page ARIA label. |
Markupis not autoloaded; load it withPager Nav $modules->get('Markupwhen using it directly without aPager Nav') PaginatedArrayorPageArrayobject.PageArrayandPaginatedArrayare usually the best public API surface:$items->renderPager(),$items->renderPagination(), and$items->getPaginationString().MarkupPageArrayis an autoload module that hooksPaginatedArray::renderPager()and usesMarkupinternally.Pager Nav render()updates$config->urls->next,$config->urls->prev, and$config->pagerHeadTagswhen next/previous pages exist.- Source file:
wire/modules/Markup/MarkupPager Nav/Markup Pager Nav.module
// Get an instance of MarkupPagerNav
$pager = $modules->get('MarkupPagerNav'); This module can create pagination for a PageArray or any other kind of PaginatedArray type.Below is an example of creating pagination for a PageArray returned from $pages->find().
// $items can be PageArray or any other kind of PaginatedArray type
$items = $pages->find("id>0, limit=10"); // replace id>0 with your selector
if($items->count()) {
$pager = $modules->get("MarkupPagerNav");
echo "<ul>" . $items->each("<li>{title}</li>") . "</ul>";
echo $pager->render($items); // render the pagination navigation
} else {
echo "<p>Sorry there were no items found</p>";
} Here’s a shortcut alternative that you can use for PageArray types (thanks to the It’s common to specify different markup and/or classes specific to the need when rendering
pagination. This is done by providing an The full list of options can be seen below. Please note that most options are set automatically since this module can
determine most of the needed information directly from the WireArray that it’s given. As a result, it’s often
not necessary to change any of the default options unless you want to change the markup and/or classes used in output. Click any linked item for full usage details and examples. Hookable methods are indicated with the icon. In addition to those shown below, the Get URL for given pagination number Get all options or set options Render pagination markup Wired to ProcessWire instance In addition to the methods and properties above, MarkupMarkupPageArray module).
Note that in this case, it’s not necessary to load the Markup$items = $pages->find("id>0, limit=10"); // replace id>0 with your selector
if($items->count()) {
echo "<ul>" . $items->each("<li>{title}</li>") . "</ul>";
echo $items->renderPager(); // render the pagination navigation
} else {
echo "<p>Sorry there were no items found</p>";
}$options array to the Markup call.
In the example below, we'll specify Uikit markup rather then the default markup: // Change options for Uikit "uk-pagination" navigation
$options = array(
'numPageLinks' => 5,
'listClass' => 'uk-pagination',
'linkMarkup' => "<a href='{url}'>{out}</a>",
'currentItemClass' => 'uk-active',
'separatorItemLabel' => '<span>…</span>',
'separatorItemClass' => 'uk-disabled',
'currentLinkMarkup' => "<span>{out}</span>"
'nextItemLabel' => '<i class="uk-icon-angle-double-right"></i>',
'previousItemLabel' => '<i class="uk-icon-angle-double-left"></i>',
'nextItemClass' => '', // blank out classes irrelevant to Uikit
'previousItemClass' => '',
'lastItemClass' => '',
);
$items = $pages->find("id>0, limit=10"); // replace id>0 with your selector
if($items->count()) {
$pager = $modules->get('MarkupMarkup class also inherits all the methods and properties of: Wire.Common
Name Return Summary string array stringNone Method options
General options
Name Return Summary $pager->baseUrl string The base URL from which the navigation item links will start .
DEFAULT: '' $pager->getVars array GET vars that should appear in the pagination, or leave empty and populate $input->whitelist (recommended). $pager->numPageLinks int The number of links that the pagination navigation should have, minimum 5 .
DEFAULT: 10 $pager->page null Page The current Page, or leave NULL to autodetect. Markup options
Name Return Summary $pager->currentLinkMarkup string Link markup for current page. Place {url} for href attribute and {out} for label content. .
DEFAULT: "<a href='{url}'><span>{out}</span></a>" $pager->itemMarkup string List item markup. Place {class} for item class (required), and {out} for item content. .
DEFAULT: "<li class='{class}' aria-label='{aria-label}'>{out}</li>" $pager->linkMarkup string Link markup. Place {url} for href attribute, and {out} for label content. .
DEFAULT: "<a href='{url}'><span>{out}</span></a>" $pager->listMarkup string List container markup. Place {out} where you want the individual items rendered and {class} where you want the list class .
DEFAULT: "<ul class='{class}' aria-label='{aria-label}'>{out}</ul>" $pager->separatorItemMarkup string Markup to use for the "..." separator item, or NULL to use $itemMarkup .
DEFAULT: NULL Class options
Name Return Summary $pager->currentItemClass string Class for current item .
DEFAULT: 'Markup $pager->firstItemClass string Class for first item .
DEFAULT: 'Markup $pager->firstNumberItemClass string Class for first numbered item .
DEFAULT: 'Markup $pager->lastItemClass string Class for last item .
DEFAULT: 'Markup $pager->lastNumberItemClass string Class for last numbered item .
DEFAULT: 'Markup $pager->listClass string The class name to use in the $listMarkup .
DEFAULT: 'MarkupPageNav' $pager->nextItemClass string Class for next item .
DEFAULT: 'Markup $pager->previousItemClass string Class for previous item .
DEFAULT: 'Markup $pager->separatorItemClass string Class for separator item .
DEFAULT: 'Markup Label options
Name Return Summary $pager->currentItemAriaLabel string Label announcing current page to screen readers .
DEFAULT: 'Page {n}, current page' $pager->itemAriaLabel string Label announcing page number to screen readers .
DEFAULT: 'Page {n}' $pager->listAriaLabel string Label announcing pagination to screen readers .
DEFAULT: 'Pagination links' $pager->nextItemLabel string label used for the 'Next' button .
DEFAULT: 'Next' $pager->previousItemLabel string label used for the 'Previous' button .
DEFAULT: 'Prev' $pager->separatorItemLabel string label used in the separator item .
DEFAULT: '…' Other options
Name Return Summary $pager->arrayToCSV bool When arrays are present in getVars, they will be translated to CSV strings in the queryString "?var=a,b,c". If set to false, then arrays will be kept in traditional format: "?var[]=a&var[]=b&var=c".
DEFAULT: true $pager->itemsPerPage int Get number of items to display per page (set automatically, pulled from limit=n). $pager->pageNum int Get or set the current page number (1-based, set automatically). $pager->queryString string Get or set query string used in links (set automatically, based on $input->whitelist or getVars array). $pager->totalItems int Get total number of items to paginate (set automatically). Additional methods and properties
API reference based on ProcessWire core version 3.0.267