Using DataTables with Struts

anjibman

I am using Struts 1 as the front-end framework and on one of the page I am using DataTable to display result.
So now I am having problem doing AJAX call to Struts action to retrieve those record. Can anyone walk me through how I can do such call.

Also as next step I am implementing "hidden row detail" but on my own way. What I am doing is once table is loaded with top level data (e.g. directory name) if user click on any of those then it should display file list under it which in addition will have link to download that file. And that file is download through one of the Struts action.

It will be great help if any one can suggest me the best way to do it.

Thanks in advance.

djdube@comcast.net

Hi, I too am using Struts 1 and old fashioned JSP not JSF pages. Datatables give us a really nice GUI without having to upgrade to JSF. With datatables i'm using just dom, html tables and servlets, no ajax calls back to struts. You may find this useful: http://www.codecoffee.com/articles/ajax.html its a brief jsp call to ajax example.

allan

What you can do is use fnServerData to "intercept" the json from the server and alter it into whatever format of array you want to pass to DataTables. For example here is a plug-in which takes OpenSearch API results and converts them into a 2D array: http://datatables.net/plug-ins/server-data-formats#OpenSearch

Allan

anjibman

My code look for jsp page look somewhat like this. I can get first level record from the Struts action. Now how can i call another action to get sublist and make them link to enable user to download.

[code]



/* Formating function for row details */
function fnFormatDetails ( oTable, nTr )
{
var aData = oTable.fnGetData( nTr );
var sOut = '';
sOut += //This must be links of sub list for this particular record.

sOut += '';

return sOut;
}

$(document).ready(function() {

/*
* Insert a 'details' column to the table
*/
var nCloneTh = document.createElement( 'th' );
var nCloneTd = document.createElement( 'td' );
nCloneTd.innerHTML = '';
nCloneTd.className = "center";

$('#documents thead tr').each( function () {
this.insertBefore( nCloneTh, this.childNodes[0] );
} );

$('#documents tbody tr').each( function () {
this.insertBefore( nCloneTd.cloneNode( true ), this.childNodes[0] );
} );

/*
* Initialse DataTables
*/
var oTable = $('#documents').dataTable({

"aoColumns": [
{ "bSortable": false },
{ "bVisible": false },
null,
{ "sClass": "center" },
{ "sType": "file-size" },
{ "sClass": "center" },
{ "sClass": "center" }
],
"aaSorting": [[1, 'asc']]
});
alert( oTable.fnVersionCheck( '1.6.0' ) );

/* Add event listener for opening and closing details
* Note that the indicator for showing which row is open is not
* controlled by DataTables, rather it is done here
*/
$('td img', oTable.fnGetNodes() ).each( function () {
$(this).click( function () {
var nTr = this.parentNode.parentNode;
if ( this.src.match('details_close') )
{
/* This row is already open - close it */
this.src = "images/details_open.png";
oTable.fnClose( nTr );
}
else
{
/* Open this row */
this.src = "images/details_close.png";
//Do I have to call server here to get sublist for this record?
oTable.fnOpen( nTr, fnFormatDetails(oTable, nTr), 'details' );
}
} );
} );
});






//My Table headings




<%
//JSP code to get list from the server.
%>

// Display the list.



[/code]