Appfuse, customise pagination like Bootstrap pagination using DisplayTag

As in the previous post we saw how to update to version 3.3.1 of Bootstrap in our application with AppFuse, in this post I want to share with you how to customize paging used in the default application generated by AppFuse.

First we have to start by saying that the generated application with AppFuse used to display lists of data in tables is a library called "DisplayTags" if you want to learn more about DisplayTags you can go to the documentation on the home page. By default DisplayTags has a style like this one shown below:

Thanks to the AppFuse development team, they did a great job including in the skeleton generated application styles like Bootstrap 3, and this is the result obtained:

In this article we want to share and show DisplayTags paging component like Bootstrap style. For  doing this we need to go to the file "displaytag.properties" found in the Web module of our application in this path "web/src/main/resources/displaytag.properties" It is the content:

# For a list of settings you can customize, see
# http://displaytag.sourceforge.net/configuration.html

basic.empty.showtable=true
paging.banner.onepage=
export.banner=

Export options: {0}
export.pdf=true

This file is used by DisplayTags for configuration and personalization, in our case we want to show the paging component like Bootstrap paging, then we add this new configuration:

paging.banner.placement=top
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=<nav><ul class="pagination"><li><a href="{1}"><span aria-hidden="true">&laquo;</span><span class="sr-only">Previous</span></a></li>{0}<li><a href="{4}"><span aria-hidden="true">&raquo;</span><span class="sr-only">Next</span></a></li></ul></nav>
#<nav><div class="pagination"><ul><li class="disabled"><a href="{1}"><span aria-hidden="true">&laquo;</span><span class="sr-only">Previous</span></a></li><li class="prev disabled"><a href="{2}" class="next" title="previous"></a></li>{0}<li><a href="{3}" class="next" title="next"></li><li class="next"><a href="{4}" class="next" title="lest"></li></ul></div></nav>
paging.banner.first=<nav><ul class="pagination"><li class="disabled"><a href="{1}"><span aria-hidden="true">&laquo;</span><span class="sr-only">Previous</span></a></li>{0}<li><a href="{4}"><span aria-hidden="true">&raquo;</span><span class="sr-only">Next</span></a></li></ul></nav>
#<nav><div class="pagination"><ul><li class="prev"><a href="{1}" class="next" title="first"></a></li><li class="prev"><a href="{2}" class="next" title="previous"></li>{0}<li><a href="{3}" class="next" title="next"></a></li><li class="next"><a href="{4}" class="next" title="lest"></li></ul></div></nav>
paging.banner.last=<nav><ul class="pagination"><li class="disabled"><a href="{1}"><span aria-hidden="true">&laquo;</span><span class="sr-only">Previous</span></a></li>{0}<li class="disabled"><a href="{4}"><span aria-hidden="true">&raquo;</span><span class="sr-only">Next</span></a></li></ul></nav>
paging.banner.onepage=<nav><ul class="pagination">{0}</ul></nav>

paging.banner.page.selected=<li class="disabled"><span>{0}</span></li>
paging.banner.page.link=<li><a href="{1}">{0}</a></li>
paging.banner.page.separator=

Then we save the changes and deploy our project and we will see this new design:

I hope this help.