Problem using DataTables when generated using XSLT
Problem using DataTables when generated using XSLT
woo37830
Posts: 9Questions: 0Answers: 0
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]
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]
This discussion has been closed.
Replies
Also don't use display: none to hide columns - I'd suggest using bVisible .
Allan
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
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.
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.
> Also, want to hide some of the columns.
That's what the bVisible option is for :-)
Allan
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.
[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
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.