displaytag customise pagination

fluminis picture fluminis · Aug 7, 2012 · Viewed 15k times · Source

I'm trying to style the <displaytag> to obtain something that look great.

The official demo look like :

http://demo.displaytag.org/displaytag-examples-1.2/example-paging.jsp enter image description here

But I obtain only this :

style of my current pagination

How can I change the rendering of the pagination part of the displaytag so that page numbers are in <li> elements ?

Thanks in advance

Answer

fluminis picture fluminis · Aug 7, 2012

To customise the pagination, I had to add a displayTag.properties file with the following properties :

paging.banner.no_items_found=<span class="pagebanner">No {0} found.</span>
paging.banner.one_item_found=<span class="pagebanner">One {0} found.</span>
paging.banner.all_items_found=<span class="pagebanner">{0} {1} found, displaying all {2}.</span>
paging.banner.some_items_found=<span class="pagebanner">{0} {1} found, displaying {2} to {3}.</span>

paging.banner.full=<div class="pagination"><ul><li class="prev disabled"><a href="{1}" class="next" title="first"><img src="static/images/first.png" alt="first" /></a></li><li class="prev disabled"><a href="{2}" class="next" title="previous"><img src="static/images/previous.png" alt="previous" /></a></li>{0}<li><a href="{3}" class="next" title="next"><img src="static/images/next.png" alt="next" /></a></li><li class="next"><a href="{4}" class="next" title="lest"><img src="static/images/last.png" alt="last" /></a></li></ul></div>
paging.banner.first=<div class="pagination"><ul><li class="prev"><a href="{1}" class="next" title="first"><img src="static/images/first.png" alt="first" /></a></li><li class="prev"><a href="{2}" class="next" title="previous"><img src="static/images/previous.png" alt="previous" /></a></li>{0}<li><a href="{3}" class="next" title="next"><img src="static/images/next.png" alt="next" /></a></li><li class="next"><a href="{4}" class="next" title="lest"><img src="static/images/last.png" alt="last" /></a></li></ul></div>
paging.banner.last=<div class="pagination"><ul><li class="prev"><a href="{1}" class="next" title="first"><img src="static/images/first.png" alt="first" /></a></li><li class="prev"><a href="{2}" class="next" title="previous"><img src="static/images/previous.png" alt="previous" /></a></li>{0}<li class="next disabled"><a href="{3}" class="next" title="next"><img src="static/images/next.png" alt="next" /></a></li><li class="next disabled"><a href="{4}" class="next" title="lest"><img src="static/images/last.png" alt="last" /></a></li></ul></div>
paging.banner.onepage=<div class="pagination"><ul>{0}</ul></div>

paging.banner.page.selected=<li><strong>{0}</strong></li>
paging.banner.page.link=<li><a href="{1}" title="Go to page {0}">{0}</a></li>
paging.banner.page.separator=