FixedColumns:

Killian

Hi,

First, thanks for your powerful tool!

I use different API and I am facing a problem I can't understand.

Here is my initialization code in the table:


[code]


@import "<?php echo FONCTIONS .'/table/css/TableTools.css';?>";

@import "<?php echo FONCTIONS .'/table/css/ColReorder.css';?>";

@import "<?php echo FONCTIONS .'/table/css/ColVis.css';?>";

@import "<?php echo FONCTIONS .'/table/css/demo_page.css';?>";

@import "<?php echo FONCTIONS .'/table/css/demo_table_jui.css';?>";

@import "<?php echo FONCTIONS .'/table/themes/jquery-ui-1.8.4.custom.css';?>";

thead input { width: 100% }

input.search_init { color: #999 }






















(function($) {

/*

* Function: fnGetColumnData

* Purpose: Return an array of table values from a particular column.

* Returns: array string: 1d data array

* Inputs: object:oSettings - dataTable settings object. This is always the last argument past to the function

* int:iColumn - the id of the column to extract the data from

* bool:bUnique - optional - if set to false duplicated values are not filtered out

* bool:bFiltered - optional - if set to false all the table data is used (not only the filtered)

* bool:bIgnoreEmpty - optional - if set to false empty values are not filtered from the result array

* Author: Benedikt Forchhammer

*/

$.fn.dataTableExt.oApi.fnGetColumnData = function ( oSettings, iColumn, bUnique, bFiltered, bIgnoreEmpty ) {

// check that we have a column id

if ( typeof iColumn == "undefined" ) return new Array();


// by default we only wany unique data

if ( typeof bUnique == "undefined" ) bUnique = true;


// by default we do want to only look at filtered data

if ( typeof bFiltered == "undefined" ) bFiltered = true;


// by default we do not wany to include empty values

if ( typeof bIgnoreEmpty == "undefined" ) bIgnoreEmpty = true;


// list of rows which we're going to loop through

var aiRows;

// use only filtered rows

if (bFiltered == true) aiRows = oSettings.aiDisplay;

// use all rows

else aiRows = oSettings.aiDisplayMaster; // all row numbers


// set up data array

var asResultData = new Array();


for (var i=0,c=aiRows.length; i -1) continue;


// else push the value onto the result data array

else asResultData.push(sValue);

}

return asResultData;

}}(jQuery));


function fnCreateSelect( aData )

{

var r='', i, iLen=aData.length;

for ( i=0 ; i ColVis T ->table tool R->colreorder*/

"oTableTools": {

"sSwfPath": "swf/copy_cvs_xls_pdf.swf",

"aButtons": [

"copy",

"xls",

{

"sExtends": "pdf",

"sPdfOrientation": "landscape",

"sPdfSize": "A3",

"sPdfMessage": "<?php echo 'Statistics of platform '.$_POST['platform'].' from '.$_POST['datea'].' to '.$_POST['dateb'];?>"

},

"print",

]

}//Fin oTableTools

} );//Fin création tableau


/* Add a select menu for each TH element in the table footer */

$("tfoot th").each( function ( i ) {

this.innerHTML = fnCreateSelect( oTable.fnGetColumnData(i) );

$('select', this).change( function () {

oTable.fnFilter( $(this).val(), i );

} );

});

new FixedColumns(oTable);

} );

function checkData(){

var data = oTable._('tr', {"filter": "applied"});

alert(data+" lignes ont été filtrées.");

}


[/code]


And when I test it, a javascript error message is displayed in Firebug and no column is fixed.

The error message:

[code]
this.dom.grid.dt is undefined

this.dom.grid.dt.parentNode.insertBefore( nSWrapper, this.dom.grid.dt );

FixedColumns.js (ligne 523)
[/code]


Line 523-524 in FixedColumns.js:

[code]

nSWrapper.appendChild( nLeft );

this.dom.grid.dt.parentNode.insertBefore( nSWrapper, this.dom.grid.dt );

nSWrapper.appendChild( this.dom.grid.dt );
[/code]


However, I have may be a response:

In lines 389-391 FixedColumns.js:

[code]
/* Set up the DOM as we need it and cache nodes */

//alert("Test");

this.dom.grid.dt = $(this.s.dt.nTable).parents('div.dataTables_scroll')[0];

this.dom.scroller = $('div.dataTables_scrollBody', this.dom.grid.dt )[0];

[/code]

If you uncomment the line "alert ("Test");" the code works! What's that? O_o

If you need further information don't hesitate to task me!
Thanks.

Cordially,
Killian.

Killian

No one has any idea? :/

bleak

Same thing here. When I look at the grid object in Firebug, its dt property is undefined in _fnGridSetup, although it should have been set eariler in _fnConstruct. All the other grid's properties are there. I've tried copying the dt assignment right before the failing line, same results.
If I set a breakpoint somewhere in the beginning of _fnConstruct, everything suddenly works.
Looks like some sort of a weird race condition.

allan

Can you link me to a test page showing the problem please?

Allan

bleak

Hey Allan,
I think I've found the culprit for my case. It's in the initialization code:

[code]
$(document).ready(function() {
$.extend( $.fn.dataTable.defaults, {
"bJQueryUI": true,
"oLanguage": {
"sUrl": "<%= "/javascripts/dataTables/media/language/#{I18n.locale}.txt" %>"
}
});
});
[/code]

The weird sUrl string is from a Rails application, it correctly expands to "/javascripts/dataTables/media/language/ru.txt" on my server (I can see all the russian translations). If I take out the oLanguage part, the problem is gone.

Here's a fiddle: http://jsfiddle.net/MRSjZ/.
I can't get it to download the translations file - for some reason the response is always empty, but you can still see the 'dt is undefined' error.

allan

Because of the async behaviour of the Ajax request that sUrl makes DataTables perform, you need to initialise FixedColumns in fnInitComplete - i.e. once the table has completed its initialisation: http://jsfiddle.net/MRSjZ/1/ . I'll see if I can clarify that in the document.

Allan

bleak

Worked like a charm, thanks. I think the problem in the original post was the same. Seems like everyone else was able to figure this out, but it'd be nice to have this documented nevertheless :)