DataTables with jquery-ui tabs and FixedHeader

zuckerj

I'm attempting to implement a page using DataTables with FixedHeaders and jquery-ui (tabs)

The page has three tabs, each tab contains multiple tables.

I have successfully got all the tables to render properly across all the tabs... when I do not attempt to use FixedHeaders. When I enable FixedHeaders the javascript breaks. The error I'm getting is referencing the FixedHerader.js script:

Uncaught TypeError: Cannot read property 'oScroll' of null

I have successfully implemented FixedHeader on another non-tab page, with DataTables.

Any suggestions or help VERY appreciated.

Here's a snippet of code for one of the tables:

[code]



$(document).ready(function() {
$('#detail_Assessment').dataTable( {
"bJQueryUI": true,
"sPaginationType": "full_numbers",
"aLengthMenu": [[10,25,50,100,-1], [10,25,50,100,"All"]],
"iDisplayLength": -1

,"fnRowCallback": function( nRow, aData, iDisplayIndex ) {

if( aData[1] == '0' )
{
$('td:eq(1)', nRow).html( 'Incorrect' );
}

if( aData[1] == '1' )
{
$('td:eq(1)', nRow).html( 'Correct' );
}

return nRow;

}
,"fnFooterCallback": function ( nRow, aaData, iStart, iEnd, aiDisplay ) {

/* Avg Accuracy Total */
var iTotalAccuracy = 0;
var iTotalAccuracyInvalid = 0;
for ( var i=0 ; i

zuckerj

More information.

My issue isn't necessarily getting FixedHeader to function with tabs. After more testing I'm now struggling getting FixedHeader to function with multiple tables. This seems to break JS.

I'm using PHP to build the page, and dynamically generate the JS.

I'm looping through a table definition array to generate the DataTables code for each table. The code for each table looks a bit like this now:

[code]

$(document).ready(function() {
$('#detail_Assessment').dataTable( {
"bJQueryUI": true,
"sPaginationType": "full_numbers",
"aLengthMenu": [[10,25,50,100,-1], [10,25,50,100,"All"]],
"iDisplayLength": -1

,"fnRowCallback": function( nRow, aData, iDisplayIndex ) {

if( aData[1] == '0' )
{
$('td:eq(1)', nRow).html( 'Incorrect' );
}

if( aData[1] == '1' )
{
$('td:eq(1)', nRow).html( 'Correct' );
}

return nRow;

}
,"fnFooterCallback": function ( nRow, aaData, iStart, iEnd, aiDisplay ) {

/* Avg Accuracy Total */
var iTotalAccuracy = 0;
var iTotalAccuracyInvalid = 0;
for ( var i=0 ; i

e7solutions

if the tabs and the code works on one consider changing the way jquery tabs works!

i was using bootstrap tabs and it was all messed up and then switched to jqueryui tabs and that didnt provide any answers so i switched back to bootstrap tabs.

long story short i fixed the issue by editing the way the css controls the display in tabs.

giving the undisplayed content instead of a display:none; a position absolute and a left -500000px; and then heading to the displayed class and hitting it with relative and the left 0 fixed the issue, the problem i run into now with this is that when you have a different browser width due to a length change in the page the headers dont reload and are offset the width of the scrollbar etc. because the div reloads after the header realigns itself. minus this subtle bug that fixes itself after a scroll seems to work great! hope this helps.

e7solutions

this will fix your last issue i hope but not your major bug which i am not experiencing.

e7solutions

Hey update again!,

I took it a little farther and was able to get a marginally cleaner version by giving the wrapper of the content a position relative so i can align all absolute elements inside to it, static positioning was causing some issues to say the least had forgotten all about the parent if your still having issues good luck hope it works out for you.

e7solutions

either way let me know if it worked id love to hear your problem was solved!

zuckerj

Thanks for the information.

I'll look at what you have described in more detail when I have more time. For the time being I have just axed this "Fixed Header" functionality from my application specification, for TAB contained data.

Thanks again, and I'll let you know if I get it worked out.