Show/hide Details works , but all other tables defined after are broken

rgalindo33

Hello
Ive been searching for other posts with the same problem and found nothing, so i post this new one. Here it goes:

Im using datatables for my web application. I have about 6 different tables, so i have defined each one with a different name since they have different amount of colums, sizes, etc.
I ve added the Show/hide function, and it works pretty well, but only on one table. All the other tables that are initialized after this one are not properly displayed (the style is lost). here is a part of the code:
[code]

/* Formating function for row details */
function fnFormatDetailsPeople ( oTable, nTr )
{
var aData = oTable.fnGetData( nTr );
var sOut = <%= render :partial => "people/personfortable" %>;

return sOut;
}

$(document).ready(function() {


/*
* Initialse DataTables, with no sorting on the 'details' column
*/
var oTable = $('#people').dataTable( {
"sDom": '<"top"fi>rt<"bottom"lp<"clear">><"clear">',
"aoColumnDefs": [
{ "bSortable": false, "aTargets": [ 0 ]},
{ "sWidth": "15px", "aTargets":[0]}
],
"bAutoWidth" : false,
"aoColumns": [
{/*showmore*/ "sWidth": "10px", "bSortable":false },
...
{/*updatedat*/ "bVisible": false },
{/*opt.*/ "sWidth": "20px", "bSearchable": false, "bSortable": false }
],
"aaSorting": [[1, 'asc']],
"bJQueryUI": true,
"sPaginationType": "full_numbers",
"bStateSave": true
}
});


/* 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
*/
$('td img', oTable.fnGetNodes() ).each( function () {
$(this).click( function () {
var nTr = this.parentNode.parentNode;
if ( this.src.match('details_close') )
{
/* This row is already open - close it */
this.src = '../../../../images/details_open.png';
oTable.fnClose( nTr );
}
else if ( this.src.match('details_open') )
{
/* Open this row */
this.src = '../../../../images/details_close.png';
oTable.fnOpen( nTr, fnFormatDetailsPeople(oTable, nTr), 'details' );
}
} );
} );
} );[/code]

and right after it, comes this part, the one that is displayed wrong.
[code]

$(document).ready(function() {
oTable = $('#accommodations').dataTable({
"sDom": '<"top"fi>rt<"bottom"lp<"clear">><"clear">',

"bJQueryUI": true,
"sPaginationType": "full_numbers",
"bStateSave": true,
"bAutoWidth" : false,
"aoColumns": [
{/*showmore*/ "sWidth": "10px", "bSortable":false },
...
{/*opt.*/ "sWidth": "20px", "bSearchable": false, "bSortable": false }
]
}


});
} );

[/code]

How is it possible to apply this hide show rows on several tables?
Thanks in advance!

allan

Interesting - I don't see anything obviously wrong with this. Do you get any JS errors or anything? Can you give us a link?

Hmm actually - this line "oTable = $('#accommodations').dataTable({" creates a global variable called oTable which will stuff things up. Try Just "$('#accommodations').dataTable({"

Allan

rgalindo33

I just checked the error console and i get "oSetttings is null" on every other table but the one with the show/hide implementation.
Im sorry that i cannot send you a link but our server has internal access only at the time.

Ive tested also removing the oTable variable on every other table, but no difference. I assume that it cannot be deleted on the table with the funcionality since there are methods called asociated to the variable (example:
[code] if ( this.src.match('details_close') )
{
/* This row is already open - close it */
this.src = '../../../../images/details_open.png';
oTable.fnClose( nTr );
}[/code]

allan

Where does the console say the error "oSetttings is null" is occurring? Does it say what line and what the code on that line is? What you've good looks okay on a quick pass...

Allan

rgalindo33

Fehler: oSettings is null
Quelldatei: http://127.0.0.1:3000/media/js/jquery.dataTables.js
Zeile: 4402

Ive tried cutting parts of the code to see where is the error created, and it seems to be somewhere here
[code]
$('td img', oTable.fnGetNodes() ).each( function () {
$(this).click( function () {
var nTr = this.parentNode.parentNode;
if ( this.src.match('details_close') )
{
/* This row is already open - close it */
this.src = '../../../../images/details_open.png';
oTable.fnClose( nTr );
}
else if ( this.src.match('details_open') )
{
/* Open this row */
this.src = '../../../../images/details_close.png';
oTable.fnOpen( nTr, fnFormatDetailsPlants(oTable, nTr), 'details' );
}
} );
} );
[/code]

thanks for your quick response... i will keep digging to see whats the error!

rgalindo33

hello Allan
i keept digging and the only thing ive found so far is that the problem comes on this line
[code]$('td img', oTable.fnGetNodes() ).each( function () {[/code]

ive tried to give each table a different var name, but it doesnt seem to change a thing.. im really lost here... any help would be appreciated
thanks in advance
Raul

allan

Which version of DataTables are you using? Line 4402 in 1.7.1 is to do with sorting, which doesn't seem to relate to this issue. I don't really see why that line would be causing a problem to be honest. Is there any way you can put this on a publicly addressable server so I can see what is happening (http://datatables.net/contact if you don't want to make the address public).

Thanks,
Allan

rgalindo33

im working with datatables 1.6.2 ...

allan

Hmm - this is odd. In 1.6.2 line 4402 is in _fnGetTrNodes as "var iLen = oSettings.aoData.length;". I don't know how oSettings could be null though... First suggestion is to update to 1.7.1 and see if that helps...

Allan

rgalindo33

ok... already updated to the version 1.7.1, therefore i get still this error

Fehler: oSettings is null
Quelldatei: http://127.0.0.1:3000/media/js/jquery.dataTables.js
Zeile: 5440

maybe we can check from the begginning again..
im loading every definition from the tables on a layout file.. therefore they are all loaded on every page.. i dont know if this could be a reason ?
ive already tried to give every table that implements the show details funcionality a diferent name, but it still wont do anything..

thank you again
Raul

rgalindo33

Problem solved!
Ive taken every script, removed it from the layout header and made a partial out of each one, and call them when needed.
Thanks a lot allen for your support! datatables is super!

taelor

Hey allan, its me again. $)

I have a similar issue that I can't seem to figure out.

We have a bunch of reports that we run in the background, and poll the server to see when its done (can't wait for HTML websockets to get fully implemented! but thats another story) and when its finished, we send some html thats mainly a table, and then initialize a datatable on it.

Everything works great, like showing/hiding of columns, sorting, themeroller, table tools, even other smaller tables for percentages and such.

But the the problem is when we run the same report again, the table renders fine, sorting and everything else works, except when we goto show/hide, I get the "oSettings is null" error. It happens around line 1902

[code]
/*
* Function: fnShowColoumn
* Purpose: Show a particular column
* Returns: -
* Inputs: int:iCol - the column whose display should be changed
* bool:bShow - show (true) or hide (false) the column
*/
this.fnSetColumnVis = function ( iCol, bShow )
{
var oSettings = _fnSettingsFromNode( this[_oExt.iApiIndex] );
var i, iLen;
var iColumns = oSettings.aoColumns.length;
[/code]

at the iColumns instansiation. I've tried to follow the code to the source, but no luck. For the record, this used to work with an older version of dataTables (i think 1.5, maybe 1.4, i could find out), but when we upgraded to 1.7 thats when we came across this issue.

now my only thought is that I'm using the same name every time a new table is getting render and dataTableized, so im gonna try and use a _1 or _2, etc to see if that helps.

taelor

(sorry last post was too long, here is some more code stuffs)

btw, this is my initialization after the Ajax.

[code]
var referral_table = $('#referral_table').dataTable({

"aoColumns" : [
{ "sType": "html" },
{ "sType": "date" },
null,
null,
null,
null,
null,
null,
null,
null,
null,
null,
null,
{"sType": "date" },
{"sType": "date" },
{"sType": "date" },
{"sType": "date" },
{"sType": "date" },
{"sType": "date" },
{"sType": "date" },
null
],
"bAutoWidth": false,
"iDisplayLength": 9999,
"bLengthChange": false,
"bJQueryUI": true,
"bStateSave": true,
"sDom": '<"clear"><"fg-toolbar ui-widget-header ui-corner-tl ui-corner-tr ui-helper-clearfix"lfrT>t<"fg-toolbar ui-widget-header ui-corner-bl ui-corner-br ui-helper-clearfix"ip>'
});


jQuery('#referral_table_wrapper').css("width", "1800px");
jQuery('#referral_table').css("width", "1800px");


initialize_hidden_column_links(referral_table);
});
[/code]

here is the code for the initialize_hidden_column_links. just populates a div with all the links to show/hide columns.

[code]
function initialize_hidden_column_links(table_handle){
table_id = table_handle.attr("id");

jQuery('#hidden_columns').empty();

number_columns = table_handle.fnSettings().aoColumns.length;
total_width = parseInt(jQuery("#"+table_id+"_wrapper").css("width"));
column_increment = (total_width / number_columns);

jQuery.each(table_handle.fnSettings().aoColumns, function(i, column){
if(!column.bVisible){
jQuery('#hidden_columns').append("Show "+column.sTitle+"")
width = parseInt(jQuery("#"+table_id+"_wrapper").css("width"));
jQuery("#"+table_id+"_wrapper").css("width", (width-column_increment)+"px");
jQuery("#"+table_id).css("width", (width-column_increment)+"px");
}
else{
jQuery('#hidden_columns').append("Hide "+column.sTitle+"")
}
});

jQuery('.hide_column_link').live('click', function(){
column = parseInt(jQuery(this).attr('href').split("#")[1]);
header = jQuery(this).text().replace(/Hide /, "");
table_handle.fnSetColumnVis( column, false );
jQuery(this).text("Show "+header).removeClass('hide_column_link').addClass('show_column_link');
jQuery(this).parent().attr("style", "text-align:left");
width = parseInt(jQuery("#"+table_id+"_wrapper").css("width"));
jQuery("#"+table_id+"_wrapper").css("width", (width-column_increment)+"px");
jQuery("#"+table_id).css("width", (width-column_increment)+"px");
});

jQuery('.show_column_link').live('click', function(){
column = parseInt(jQuery(this).attr('href').split("#")[1]);
header = jQuery(this).text().replace(/Show /, "");
table_handle.fnSetColumnVis( column, true );
jQuery(this).text("Hide "+header).removeClass('show_column_link').addClass('hide_column_link');
jQuery(this).parent().attr("style", "text-align:right");
width = parseInt(jQuery("#"+table_id+"_wrapper").css("width"));
jQuery("#"+table_id+"_wrapper").css("width", (width+column_increment)+"px");
jQuery("#"+table_id).css("width", (width+column_increment)+"px");
});
}

[/code]

thanks for any insight, totally appreciated as always.

allan

My guess is that using the _1, _2 will help - does it?

What I think is happening is that when destroying the old DOM you take out the references that DataTables has stored in it's settings object (although I don't really understand why it would be null). When doing the unload (or the reload) try calling fnDestroy() on the table - does that help?

What would be extremely useful is a very simple script which shows this problem so I can back trace it.

Regards,
Allan

taelor

i tried both the _1, _2, _3 and the fnDestroy method, both still reported the same problem.

I posted the initialization code, and the code that runs the showing/hiding of columns, not sure what more you want me to share with you. whatever more you need, just let me know.

pretty much with the report renders the table, the code runs to initialize the table, and then when you hit on certain links, it will show/hide columns.