[csutton]

Add pagination and column sorting to your Spring MVC and Web Flow CRUD Scaffolded apps with minimal client side javascript

When the list page is loaded on a scaffolded CRUD application in either Spring MVC or Web Flow, the default behavior is to download all records onto the page. Currently there is no way to specify the number of items to show on the page and generate a pagination/navigation system.
Since all of the results are already downloaded at once on the page, the pagination is easily and quite effectively accomplished via client side Javascript which simply uses DHTML to hide and display the results in the specified number of rows that you would like shown per page.

Here is all you need to set this up:

1. You’ll need to include a javascript file in the Head section of the generated list.jsp page. The javascript file can be downloaded here:
http://it.newinstance.it/wp-content/uploads/2006/09/paging-demo.zip
unzip it and place the paging.js file in your project and reference it in the Header of your page.
i.e.
<script type=”text/javascript” src=”js/paging.js”></script>

2. You will need an empty Div to contain the navigation links with a unique ID, i.e.

<div id=”pageNavPosition” style=”position: relative; top: 310px; left: 5px;”></div>
Note, I had to add a little bit of inline style to get the div to appear exactly where I wanted it. You can tweak those settings to suit your particular needs.

You’ll also need just a little styling for your nav links so throw this in the head section as well.
<style type=”text/css”>
.pg-normal {
color: black;
font-weight: normal;
text-decoration: none;
cursor: pointer;
}
.pg-selected {
color: black;
font-weight: bold;
text-decoration: underline;
cursor: pointer;
}
</style>

3. Lastly, we need an initialization call at the bottom of our page that does all the magic after the records are pulled from the database.
It takes a few parameters:
‘listTable’ is the ID of the Table that contains the data
10 is the number rows to display. This of course is custumizable to your preference.
‘pageNavPosition’ is the ID of the empty Div that will contain the nav links.
‘pager.showPage(1)’ specifies which page to default to on load.

<script type=”text/javascript”>
var pager = new Pager(‘listTable’, 10);
pager.init();
pager.showPageNav(‘pager’, ‘pageNavPosition’);
pager.showPage(1);
</script>

That should do it. Most of the code for this was garnered from the following link:
http://en.newinstance.it/2006/09/27/client-side-html-table-pagination-with-javascript/
Thank you Luigi!

[Author]

Posts