I am currently utilizing displaytag to present tabular data, but I aspire to design a user interface akin to "kayak.com" where clicking on a row reveals additional details without refreshing the page.
Here is an example scenario before clicking the Details link on Row 1:
row1|col1|col2|col3|col4|Detail
row2|col1|col2|col3|col4|Detail
row3|col1|col2|col3|col4|Detail
After the click:
row1|col1|col2|col3|col4|Detail
--------row1Detail---------------
row2|col1|col2|col3|col4|Detail
row3|col1|col2|col3|col4|Detail
In attempting to achieve this, I experimented with a decorator to generate JavaScript code for accomplishing the task. Despite having the JavaScript executed successfully, it only affects the column in which it was created. My goal is to insert a new row with the data presentation that does not interfere with displaytag's pagination and sorting functionalities.
For instance:
public class CustomDecorator extends TableDecorator {
public String getDetailsRow() {
MyObject object = (MyObject) this.getCurrentRowObject();
return "<a onClick=\"myjsfunction(object.getId()); return true\">Details</a>";
}
}
...and within the JSP file, I would nest a detailsRow property between the display:table tags:
<display:column property="detailsRow" sortable="false" />
Do you have any guidance on how to properly insert a new row? The solution might lie in the way the JavaScript is coded - considering my limited expertise with JavaScript, any advice would be greatly appreciated. Is there a more effective approach using displaytag for this purpose? To my knowledge, displaytag lacks direct integration with JavaScript such as an "onclick" parameter.
By the way, this marks my first inquiry on stackoverflow, so please inform me if further elaboration is necessary.