Problem using DataTables when generated using XSLT

woo37830

I'm creating a table using an XSLT transform. I've used DataTables successfully in another project but can't seem to get it right in this case.
The footer doesn't appear in the right place and the table doesn't sort plus when an AJAX update occurs, the table sorting icons and everything is lost.
Here is the part of the xslt that generates the page.
[code]




Entry
Job
Department
Process
Activity
Since
From


























Entry
Job
Department
Process
Activity
Since
From





[/code]

I have this in the $(document).ready(function() { ...
header.
[code]
var kounter = 0;
var auto_refresh = setInterval(function () {
kounter += 1;
var theToken = $('#token').text();
$('#error-div').text('');
$('#load_me').load("http://localhost:8080/sc_demo/tasklist.jsp?app=Home&process=tasklist&userToken="+theToken
).fadeIn("slow");
}, 30000); // autorefresh the content of the div after every 30000 milliseconds(30sec)

$('#tasklist').dataTable( {
"sPaginationType": "full_numbers",
"aoColumns": [
null,
null,
null,
null,
null,
null,
null,
null,
null,
null //put as many null values as your columns
]
}).columnFilter();
[/code]

allan

Link to a test case showing the issue please: http://datatables.net/forums/discussion/12899/post-test-cases-when-asking-for-help-please-read .

Also don't use display: none to hide columns - I'd suggest using bVisible .

Allan

woo37830

To see the above behavior, use:

http://52.142.142.55:8080/sc_demo

enter "ralph" as userId, "ralph" as password, and "Shoulders" to organization and click login.

The "tasklist" will show up. After 30 seconds a new query
will replace the tasklist and the sorting, etc. do not show up.

Please excuse horrible colors and styling. Not done yet!

I've done as you suggested and changed to using bVisible, but right now all columns are visible.

I will want to hide column 1 and last two columns and also not sort on some of them.

allan

Request times out for me I'm afraid. I'll try again in the morning.

Allan

pmccann

Not sure about the sorting stuff, but shouldn't that be "tfoot" tags in the table declaration. Not "tfooter"?

woo37830

Yes, I changed that. Before I changed to tfoot they didn't appear at all.
Not sure why the timeout occurs. I've had others check and it appears to work.

Be sure to use 50.142.142.55:8080 as that's the only one I've mapped through the router.

woo37830

I believe that if you try http://jwooten37830.com:8080/sc_demo
and log in as "ralph", "ralph", "Shoulders"
You will initially see a table built using DataTables with headers and footers.
While it looks bad ( colors, etc. ) it appears to be working.

Wait about 30 seconds and an update to the table will occur in the background and all of the headers and footers are gone. The update is done and replaces the contents of the table div with new contents.
How do i do this without loosing the headers and footers?

Also, want to hide some of the columns.

allan

It looks like you are just wholesale replace the table DOM element. You need to use the DataTables API if you want to update its contents. Specifically the fnClearTable and fnAddData methods are likely to be the ones which are useful to you.

> Also, want to hide some of the columns.

That's what the bVisible option is for :-)

Allan

woo37830

Thanks for the assistance. I looked at what was there and also the reDraw API. I need to get the data from the server, but I call a web-service and it returns an xml string that is processed by an xslt. Is it possible to do this with the reDraw or via the fnAddData?

I've used the vVisible option, but had some problems with the headers and footers when I did no. It worked fine on the table itself.

woo37830

This is in included header.js inside the $(document).ready(function(){


[code]
var $dataTable = $('#tasklist').dataTable( {
"sPaginationType": "full_numbers",
"aoColumns": [
{ "bVisible": false },
null,
null,
null,
null,
null,
null,
null,
{ "bVisible": false },
{ "bVisible": false }
]
}).columnFilter();

var kounter = 0;
var auto_refresh = setInterval(function () {
kounter += 1;
var theToken = $('#token').text();
$('#error-div').text('');
$('#load_me').load("http://localhost:8080/sc_demo/tasklist.jsp?app=Home&process=tasklist&userToken="+theToken
, function() {
//alert('Load was performed');
//$dataTable.fnReloadAjax( $dataTable.oSettings());
// tried also putting code that sets up dataTables in here again so it would get reset when the load occurred.
})
.fadeIn("slow");
// $(document).find("#tasklist").dataTable().columnFilter();
}, 30000); // autorefresh the content of the div after every 30000 milliseconds(30sec)
[/code]

this is in home.jsp which includes the home.js above
[code]




OID
Entry
Job
Department
Process
Activity
Since
From
Data
Result




<%@ include file="tasklist.jsp" %>



OID
Entry
Job
Department
Process
Activity
Since
From
Data
Result







[/code]

This is in the tasklist.jsp referenced above:

[code]
<%-- start web service invocation --%>
<%
String result = "";
try {
com.shoulderscorp.services.TaskListWS service = new com.shoulderscorp.services.TaskListWS();
com.shoulderscorp.services.TastListWS port = service.getTastListWSPort();
// TODO initialize WS operation arguments here

// TODO process result here
String aUser = request.getParameter("userToken");
result = port.getTaskListForUser(aUser);
} catch (Exception ex) {
// TODO handle custom exceptions here
}
%>


Task List








[/code]

And lastly, this is the tasklist.xsl which process the "result" obtained from above.

[code]

<%-- start web service invocation --%>
<%
String result = "";
try {
com.shoulderscorp.services.TaskListWS service = new com.shoulderscorp.services.TaskListWS();
com.shoulderscorp.services.TastListWS port = service.getTastListWSPort();
// TODO initialize WS operation arguments here

// TODO process result here
String aUser = request.getParameter("userToken");
result = port.getTaskListForUser(aUser);
} catch (Exception ex) {
// TODO handle custom exceptions here
}
%>


Task List







[/code]

As you can see I've tried several things. I also tried putting the invocation of the dataTable again inside the function that gets processed when the refresh happens. Nothing like that works. Trying to see how it would be done when using the xslt.

allan

Currently no - there is no way to add plain HTML to a DataTable. It either needs to be a data source object, or as a DOM node using the fnAddTr plug-in: http://datatables.net/plug-ins/api#fnAddTr . It is probably possible to modify the fnAddTr plugin to have it create a DOM node from the XML TR node and then add that to the table thinking about it, or just grab the data from the XML into an array and use fnAddData .

Allan

woo37830

Thanks for letting me know. Figured out how to do it just refreshing the entire page. It works, if not elegant.

woo37830

Now having two problems:

1) Cannot set width of columns. All come out the same. Tried aoColumns: {width: "10px"} etc.

2) If I set a column to bVisible: false, then I cannot seem to get the value stored in that column to use in an ajax query or submit. Since the columns are so wide, I either have to restrict their size or hide the ones that I really don't want the customer to see, but have data I need for subsequent submission.