Dokumentation

Purpose

Pagination allows structured data being displayed in chunks by limiting the number of entries shown. It provides the user with controls to leaf through the chunks of entries.

Composition

Pagination is a collection of shy-buttons to access distinct chunks of data, framed by next/back glyphs. When used with the "DropdownAt" option, a dropdown is rendered if the number of chunks exceeds the option's value.

Effect

A click on an chunk-option will change the offset of the displayed data-list, thus displaying the respective chunk of entries. The active option is rendered as an unavailable shy-button. Clicking the next/back-glyphs, the previous (respectively: the next) chunk of entries is being displayed. If a previous/next chunk is not available, the glyph is rendered unavailable. If the pagination is used with a maximum of chunk-options to be shown, both first and last options are always displayed.

Usage

1. A Pagination MUST only be used for structured data, like tables and lists.
2. A Pagination MUST NOT be used standalone.
3. Paginations MUST be visually close to the list or table their operation will have effect upon. They MAY be placed directly above and/or below the list.

Accessibility

1. Pagination MUST be operable via keyboard only.

 
function base()
{
    global $DIC;
    $factory = $DIC->ui()->factory();
    $renderer = $DIC->ui()->renderer();
    $url = $DIC->http()->request()->getRequestTarget();
 
    $parameter_name = 'page';
    $current_page = (int) @$_GET[$parameter_name];
 
    $pagination = $factory->viewControl()->pagination()
        ->withTargetURL($url, $parameter_name)
        ->withTotalEntries(98)
        ->withPageSize(10)
        ->withCurrentPage($current_page);
 
    $start = $pagination->getOffset();
    $stop = $start + $pagination->getPageLength();
    $result = "entries $start to $stop";
    return $renderer->render($pagination)
        . '<hr>'
        . $result;
}
 

 
function many_pages_dropdown()
{
    global $DIC;
    $factory = $DIC->ui()->factory();
    $renderer = $DIC->ui()->renderer();
    $url = $DIC->http()->request()->getRequestTarget();
 
    $parameter_name = 'page2';
    $current_page = (int) @$_GET[$parameter_name];
 
    $pagination = $factory->viewControl()->pagination()
        ->withTargetURL($url, $parameter_name)
        ->withTotalEntries(102)
        ->withPageSize(10)
        ->withDropdownAt(5)
        ->withCurrentPage($current_page);
 
    $start = $pagination->getOffset();
    $stop = $start + $pagination->getPageLength();
    $result = "entries $start to $stop";
    return $renderer->render($pagination)
        . '<hr>'
        . $result;
}
 

 
function many_pages()
{
    global $DIC;
    $factory = $DIC->ui()->factory();
    $renderer = $DIC->ui()->renderer();
    $url = $DIC->http()->request()->getRequestTarget();
 
    $parameter_name = 'page2';
    $current_page = (int) @$_GET[$parameter_name];
 
    $pagination = $factory->viewControl()->pagination()
        ->withTargetURL($url, $parameter_name)
        ->withTotalEntries(1000)
        ->withPageSize(2)
        ->withMaxPaginationButtons(5)
        ->withCurrentPage($current_page);
 
    $start = $pagination->getOffset();
    $stop = $start + $pagination->getPageLength();
    $result = "entries $start to $stop";
    return $renderer->render($pagination)
        . '<hr>'
        . $result;
}
 

 
function no_pages()
{
    global $DIC;
    $factory = $DIC->ui()->factory();
    $renderer = $DIC->ui()->renderer();
    $url = $DIC->http()->request()->getRequestTarget();
 
    $pagination = $factory->viewControl()->pagination()
        ->withPageSize(10)
        ->withTotalEntries(0);
 
    $pagination_onepage = $pagination->withTotalEntries(9);
    $pagination_limited = $pagination->withMaxPaginationButtons(5);
 
 
    return $renderer->render($pagination)
        . '<hr>'
        . $renderer->render($pagination_onepage)
        . '<hr>'
        . $renderer->render($pagination_limited)
    ;
}
 

1 2 3 4 5 6 7 8 9 10

×

Mountains

Image source: https://stocksnap.io, Creative Commons CC0 license

 
function with_signal()
{
    global $DIC;
    $factory = $DIC->ui()->factory();
    $renderer = $DIC->ui()->renderer();
 
    $image = $factory->image()->responsive("src/UI/examples/Image/mountains.jpg", "Image source: https://stocksnap.io, Creative Commons CC0 license");
    $page = $factory->modal()->lightboxImagePage($image, 'Mountains');
    $modal = $factory->modal()->lightbox($page);
 
    $pagination = $factory->viewControl()->pagination()
        ->withTotalEntries(98)
        ->withPageSize(10)
        ->withResetSignals()
        ->withOnSelect($modal->getShowSignal());
 
    return $renderer->render([$pagination, $modal]);
}
 

Parents

1. UIComponent
2. View Control