Oat Pagination Demo

Paging navigator

OatPagingNavigator and OatAjaxPagingNavigator are Wicket's PagingNavigator/AjaxPagingNavigator rendered as Oat pagination. Give them any IPageable — a DataView, PageableListView or DataTable — and they handle the current page (solid, aria-current="page") and the inactive first/previous/next/last buttons.

• Item 1
• Item 2
• Item 3
• Item 4
• Item 5
• Item 6
• Item 7
• Item 8
• Item 9
• Item 10

// Java
WebMarkupContainer results = new WebMarkupContainer("results");
results.setOutputMarkupId(true); // the Ajax navigator re-renders this
add(results);
results.add(items); // a PageableListView, DataView, ...
add(new OatAjaxPagingNavigator("navigator", items)); // or OatPagingNavigator

<!-- HTML -->
<div wicket:id="navigator"></div>

Custom pagination

Without an IPageable, OatPagination reuses the button-group markup: a <menu class="buttons"> wrapping each page link in an <li>. Since only the data model knows which page is current, styling the active page (dropping .outline, adding aria-current="page") is the consumer's responsibility.

// Java
add(OatPagination.of("pagination", Model.ofList(pages), (item, page) -> {
    Link<Void> link = new Link<>("link") { public void onClick() {} };
    link.add(new Label("label", String.valueOf(page)));
    boolean current = page == currentPage;
    link.add(AttributeModifier.replace("class", current ? "button small" : "button outline small"));
    if (current) link.add(AttributeModifier.replace("aria-current", "page"));
    item.add(link);
}));

<!-- HTML -->
<nav wicket:id="pagination">
    <menu wicket:id="menu">
        <li wicket:id="items">
            <a wicket:id="link" class="button outline small"><span wicket:id="label"></span></a>
        </li>
    </menu>
</nav>