|
|
Optimize with a SATA RAID Storage Solution
Range of capacities as low as $1250 per TB. Ideal if you currently rely on servers/disks/JBODs
Page 4 of 5
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.
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:
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> ';
} else {
el.innerHTML += '<a href="#" onclick="currentPage=' + i + ';
refreshData();">' + (i + 1) + '</a> ';
}
}
}
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.
_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.
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.
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.
Action interface and teaches you how to create a login page using WebWork, JSP, and the Velocity template engine.
json result type that serializes actions into JSON, facilitating JavaScript-to-Java interactions in Struts 2 applications.
Archived Discussions (Read only)