[Bookmarkable link|http://cwiki.apache.org/WICKET/{todo-static-url}]
{excerpt:hidden=true}Hidden Excerpt{excerpt}
{panel:borderStyle=solid|title=Table of contents}{toc:minLevel=2}{panel}

h2. Initial situation: Paging done without Ajax

Say you have a page with a PagingNavigator and a DataView. 

{code}
DataView dataView = new MyDataView("dataView");
add(dataView);

PagingNavigator pager = new PagingNavigator("pager", dataView);
add(pager);
{code}

h2. Adding Ajax

Now you want to do the paging be done via Ajax. But simply replacing the PagingNavigator with a AjaxPagingNavigator won't do it - the Page will be updated, but the DataView won't. To accomplish this, you need to do the following:

* surround the PagingNavigation and the DataView with a WebMarkupContainer
* tell the AjaxPagingNavigator to update the WebMarkupContainer
* update your HTML to match the new component hierarchy

{code}
final WebMarkupContainer dataContainer = new WebMarkupContainer("dataContainer");
dataContainer.setOutputMarkupId(true);
add(dataContainer);

DataView dataView = new MyDataView("dataView");
dataContainer.add(dataView);

AjaxPagingNavigator pager = new AjaxPagingNavigator("pager", dataView) {
	@Override
	protected void onAjaxEvent(AjaxRequestTarget target) {
		target.addComponent(dataContainer);
	}
};
dataContainer.add(pager);
{code}