In one of my recent projects I had to create Wicket pagination component with one additional functionality allowing user to dynamically change maximum number of items presented on each page.

Finished component will look like below:

custom paginator

Of course I was not going to implement this from the scratch, because most of work had been already done by Wicket authors and commiters in component PagingNavigator. Source of this component as a reference to changes I made can be found here.

The first steps in creating our component

  • add List itemsPerPageValues holding numbers for ‘items per page’ which will be shown to the user allowing him to click and change this value.
  • provide default List DEFAULT_ITEMS_PER_PAGE_VALUES, which will be used (what a surprise!) as a default 🙂
  • give our component reference to the DataView object on which we will execute change items per page method.

Below we can see changes in class fields and constructors:

First new method is addContainerWithPagingLinks based mainly of onBeforeRender from PagingNavigator. This method adds paging links to the component to allow user to change number of viewed page. One small addition is an overriden isVisible which will hide paging fragment when there is only one page to show.

Next step is to override isVisible method in our component which will hide it completely when DataView has no items to render:

And now it’s time to create the core of our component: a place where items per page can be changed. This is done in method:

In the above method we create ListView for Integers from itemsPerPageValues and for each number we add link (new class ItemPerPageLink explained below) which will change DataView itemsPerPage property. Except reference to DataView we also give to our link reference to pagingLinksContainer to hide it after user changes itemsPerPage and there will be only one page to show.

Complete class ItemPerPageLink source code:

In this class we:
1. Disable link for number which is current dataView.itemsPerPage value.
2. Hide pagingLinksContainer when there is only one page.
3. Change itemsPerPage property in onClick method.
4. Set link title to the value of items per page.

And that’s all. For those who want complete solution in one place there is complete source of the class CustomPagingNavigator with its markup:

And its markup:

Using our component

Our newly created component can be used in a very similar way to the standard Wicket PagingNavigator: