[FIXED] XSLT & jQueryUI with datatables

premiumbiscuits

Hey there,

I'm working on a project to make patch reports more accessible by organizing them into accordion (jQueryUI) tabs with embedded datatables to allow them to be search/sortable. This means that I have 4-5 datatables in total, of two different types - one class, 'GRID,' simply displays a list of the known data, whereas the other class, 'issuesFixed,' has an on-click event that displays further information. This approach worked just fine when I built a mockup with static data.

However, I'm currently working on dynamic generation using XSLT and things are not going so well. Mainly, only the first table is being recognized as a datatable (when run through the debugger), but it still isn't performing the more advanced functions like mouseover color change or the detail expansion onclick. The other 3 tables are simply not being recognized even though they share the same classes (two GRID, two issuesFixed; the first table is of the issuesFixed variety).

Additionally, it keeps complaining about the included .js file for datatables, saying that "i[g-d] is undefined; Line: 78". I realize that the problem is in all likelihood something in the xslt, but I've gone over it about 10 times and haven't found any glaring problems. I'm therefore wondering if the problem lies within creating multiple datatables at once, by selecting more than one table for creation, or if there's some issue with playing nice with XSLT.

Unfortunately, I don't have the pages hosted anywhere and can't show the full thing with the recommended utility due to using multiple plugins. Here are some snippets though:

Table initialization javascript:
[code]

/* Formating function for row details */
function fnFormatDetails ( oTable, nTr ){
var aData = oTable.fnGetData( nTr );
var sOut = '';
sOut += 'This fix is located in: ' +aData[3]+ '';
sOut += '';

return sOut;
}

$(document).ready(function(){
/*
* Insert a 'details' column to the table
*/
var nCloneTh = document.createElement( 'th' );
var nCloneTd = document.createElement( 'td' );
// Note: Images to click buttons instead of the row itself.
//nCloneTd.innerHTML = '';
nCloneTd.className = "center";

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

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

/*
* Initialse DataTables, with no sorting on the 'details' column
*/
var oTable = $('.issuesFixed').dataTable({
"aoColumnDefs": [
{ "bSortable": false, "aTargets": [ 0 ] }
],
"aaSorting": [[1, 'asc']],
"bJQueryUI": true,
"sPaginationType": "full_numbers",
"aoColumns": [
/* Details */ { "bVisible": false },
/* WorkItem */ null,
/* Comment */ null,
/* Location */ { "bVisible": false },
/* Knowledgebase */ null,
/* Version */ null
]
});

/* 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
*/
// Note: click on row to make details appear. Change to:
// tbody td img to have it be associated with +/- buttons. Must populate column with
// images above first.
$('.issuesFixed tbody tr td').live('click', function () {
var nTr = $(this).parents('tr')[0];
if ( oTable.fnIsOpen(nTr) ){
/* This row is already open - close it */
//this.src = "jQuery/DataTables-1.9.1/examples/examples_support/details_open.png";
oTable.fnClose( nTr );
}
else{
/* Open this row */
//this.src = "jQuery/DataTables-1.9.1/examples/examples_support/details_close.png";
oTable.fnOpen( nTr, fnFormatDetails(oTable, nTr), 'details' );
}
});

$('.GRID').dataTable({
"bJQueryUI": true,
/* Pagination can be turned on/off here.
If it is turned on, comment out the pagination type.
"bPaginate": false*/
"sPaginationType": "full_numbers"
});
} );

[/code]

Also, links to the debugger results for the static and xsl generated versions:
http://debug.datatables.net/uvoquh --> XSL tables
http://debug.datatables.net/ewuvis --> Static tables

I'm not sure what else would be helpful, so let me know if you need other things. I don't think that I can embed the xslt directly due to nondisclosure stuff, but let me know if you need it and I can change the paths or whatever.

Thanks!

premiumbiscuits

Another thing that I just noticed is that in the first table, it is only recognizing 3 column headers, even though the original code is:
[code]

Issues fixed in revision 3


Work Item
Comment
Location
Knowledgebase
Version

[/code]
The generated code (after javascript things):
[code]




Comment





Location





Version





[/code]
And only location should be hidden.

Similarly, the datatable functionality does not activate on the recognized table until one of the column names is clicked. At that point, they become sortable and highlight on mouseover, but still do not display the onclick details.