How to use Ajax paging with DataView

Initial situation: Paging done without Ajax

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

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

PagingNavigator pager = new PagingNavigator("pager", dataView);
add(pager);

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

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);

From a posting of Igor to the wicket-user list