using datatables from one js file on multiple pages

technoicon

Hi,

i'm pretty new to js and jquery. i cant seem to figure out why this code is not working. basically i want to just the one setup.js file for all my pages.

I have setup different classes and id's but it always breaks the datatable.

the first page displays correctly but will not open this details box.

the second page doesnt have any of the pluses or anything.



[code]
/* Datatables Formating function for row details */

function fnFormatDetails ( oTable, nTr )
{
var aData = oTable.fnGetData( nTr );
var sOut = '';
sOut += 'Rendering engine:'+aData[1]+' '+aData[4]+'';
sOut += 'Link to source:Could provide a link here';
sOut += 'Extra info:And any further details here (images etc)';
sOut += '';
return sOut;
}

$(document).ready(function () {


if ($('.dataTable').dataTable) {

/* Insert a 'details' column to the table */
var nCloneTh = document.createElement( 'th' );
var nCloneTd = document.createElement( 'td' );
nCloneTd.innerHTML = 'Expand/Collapse';
nCloneTd.className = "center";

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

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

/*Initialse DataTables, with no sorting on the 'details' column*/
var oTable = $('#example').dataTable( {
"bJQueryUI" : true,
"sDom":'<"H"<"dataTables_header">lfr>t<"F"ip>',
"bPaginate": false,
"aoColumnDefs": [
{ "bSortable": false, "aTargets": [ 0 ] },
{ "bVisible": false, "aTargets": [ 5 ] },
{ "bVisible": false, "aTargets": [ 6 ] },
{ "bVisible": false, "aTargets": [ 8 ] }

],
"aaSorting": [[1, 'asc']]
});

/* 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
*/

$('#example tbody td span').live('click', function () {
var nTr = this.parentNode.parentNode;
if ( $(this).hasClass('ui-icon-circle-minus') )
{
/* This row is already open - close it */
$(this).removeClass('ui-icon-circle-minus').addClass('ui-icon-circle-plus');
oTable.fnClose( nTr ); //would like to make this slide, need code.
}
else
{
/* Open this row */
$(this).removeClass('ui-icon-circle-plus').addClass('ui-icon-circle-minus');
oTable.fnOpen( nTr, fnFormatDetails(oTable, nTr), 'details' );
}

} );


$("div.dataTables_header").html('');

}

if ($('.OtherdataTable').dataTable) {

/* Insert a 'details' column to the table*/
var nCloneTh = document.createElement( 'th' );
var nCloneTd = document.createElement( 'td' );
nCloneTd.innerHTML = 'Expand/Collapse';
nCloneTd.className = "center";

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

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

/* Initialse DataTables, with no sorting on the 'details' column */
var oTable = $('#test').dataTable( {
"bJQueryUI" : true,
"sDom":'<"H"<"dataTables_header">lfr>t<"F"ip>',
"bPaginate": false,
"aoColumnDefs": [
{ "bSortable": false, "aTargets": [ 0 ] },
{ "bVisible": false, "aTargets": [ 5 ] },
{ "bVisible": false, "aTargets": [ 6 ] },
{ "bVisible": false, "aTargets": [ 8 ] }

],
"aaSorting": [[1, 'asc']]
});

/* 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
*/

$('#proj tbody td span').live('click', function () {
var nTr = this.parentNode.parentNode;
if ( $(this).hasClass('ui-icon-circle-minus') )
{
/* This row is already open - close it */
$(this).removeClass('ui-icon-circle-minus').addClass('ui-icon-circle-plus');
oTable.fnClose( nTr ); //would like to make this slide, need code.
}
else
{
/* Open this row */
$(this).removeClass('ui-icon-circle-plus').addClass('ui-icon-circle-minus');
oTable.fnOpen( nTr, fnFormatDetails(oTable, nTr), 'details' );
}

} );
$("div.dataTables_header").html('');
}
[/code]

technoicon

anyone got any ideas? i think i might need to put them in functions?

when i check it complains about having to oTables? I thought the If statment would work here?

allan

The basic idea looks fine to me - what is the error you are getting on the Inspector / Firebug console?

Allan

technoicon

dont get an error. it's just that on the page with the second table, it is not started correctly, the expand/collapse are not there, and neither is the jquery theme's.

what i've done is just made it the one if ($('.dataTable').dataTable) { etc }

and i modify my tables to be the same length, etc. not ideal though!

allan

You've got:

$('#example').dataTable() and $('#test').dataTable() - do your two tables have the ID's 'test' and 'example'?

Allan

technoicon

yes they do.. but the tables are not on the same page. they are on different pages.. i'll setup a test site to show you what happens...

allan

Yes please :-). There is http://live.datatables.net if you need a place to host code.

Allan

technoicon

as you can see from this example. (sorry about my theme crap, bit hard to strip out)
this doesnt work.
http://live.datatables.net/owuzun/7/edit
this does:
http://live.datatables.net/owuzun/8/edit
and also this works.. weird.
http://live.datatables.net/owuzun/9/edit

these are like seperate pages. see this part:

allan

All three appear to render the table correctly for me. In what way does the first one not work? Does it happen on all browsers?

Allan

technoicon

the expand doesnt work on the first one.

technoicon

i've tried chrome and ie

allan

Ah - I see. Okay, so looking at the code, you've defined oTable twice. So when you click an event, oTable is actually undefined in this case. Simply calling the second one oTable2 will fix it: http://live.datatables.net/owuzun/10/edit

Its worth noting that different Javascript engines actually do different things with a 'var ...' which is in a nesting that is not executed. It appears that Chrome and IE initialise the variable and stick it on the stack where any 'var' is found in the function.

Allan