Ajax programming with Struts 2

Five steps to dynamic tables using Struts 2, Dojo and JSON

1 2 3 4 5 Page 4
Page 4 of 5

Let the table live!

You're now ready to put the finishing touches on your dynamic, Ajax-style table and push it out into the world. The remaining steps are to implement UI pagination control and to add sorting and row-select handles to the table.

As you will notice, both pagination control and table sorting are enabled by the refreshData function. In both cases refreshData is supposed to refresh the whole table with up-to-date data. The complete refreshData function is shown in Step 4 of the Ajax tables quick list below.

Pagination control

Good pagination data should consist of a clickable list of the total pages within the current filter, with the current page emphasized. Optionally, it should also include an indicator of the total rows found. This information is deducted from the data returned by getRowCount combined with the current page number, which should be always available on the screen. Given a span or div devoted to pagination data, whose id was testTablePagination, you would render the pagination data as follows:

Listing 6. Rendering pagination data

fillPagination = function(totalPages) {
var el = document.getElementById('testTablePagination');
el.innerHTML = 'Pages: ';
for(var i=0; i<this.totalPages; i++) {
if(currentPage==i) {
el.innerHTML += '<b>' + (i+1) + '</b>&nbsp;';
} else {
el.innerHTML += '<a href="#" onclick="currentPage=' + i + ';
refreshData();">' + (i + 1) + '</a>&nbsp;';
}
}
}

Extending FilteringTable with Dojo AOP

Once all the data is displayed you need to extend Dojo's FilteringTable functionality, adding custom handling for dynamic sort and click events. Internally, Dojo implements an aspect-oriented programming model, which means that it's possible to extend each aspect of Dojo functionality (such as FilteringTable) without modifying its underlying code. You do this simply by creating a new aspect. In AOP, an aspect is a combination of an advice (piece of code to be executed), and a joinpoint (the point when and where this code is to be executed) described using a particular syntax called a pointcut.

Dojo provides helper method to make customizing built-in functions easier. The helper method dojo.event.connect will allow you to execute a function before or after any JavaScript function call, at any given joinpoint. The methods FilteringTable calls on sort and click events are onSort and onSelect. Before weaving an advice into either of these methods, Dojo has to initialize the whole page so that all the Dojo widgets are constructed. To ensure your weaving happens right after page initialization, you should add it as an onLoad function to the Dojo container, as demonstrated by the JavaScript in Listing 7.

Listing 7. Weaving in table aspects after initialization

_container_.addOnLoad(function() {
dojo.event.connect("after", yourTable, "onSelect", function ()
{ onSelectFunc(); });
dojo.event.connect("after", yourTable, "onSort", function ()
{ refreshData(); });
}

You've now extended FilteringTable to call an onSelectFunc function when the user clicks a table row and refreshData when the user clicks a table heading. Your next step is implement both of these dynamic functions.

A note about table definition

In an Ajax-style table, a user click on a table row usually results in a detailed view of that row. This is possible only if a unique identity for the row has been provided in the table definition (which implies that one of the table row properties should be unique). Looking back to Listing 3, you will notice the valueField table was set with id value. In Listing 8 a unique identifier is looked up from the table row to be further used in detailed view display process.

Listing 8. On table row select function

onSelectFunct = function() {
var id = dojo.widget.byId(tableId).getSelectedData().id;
// code to load row details by its 'id' property
}

If you've followed the discussion so far you've learned something about the theoretical basis for creating dynamic tables in Struts 2. Now let's go through these steps again, but more quickly. You can follow the code samples in the next section to develop your own dynamic, Ajax-style table using Struts 2. See the Resources section to download the source code.

1 2 3 4 5 Page 4
Page 4 of 5
How to choose a low-code development platform