Error on Page

Craig

Hi

I'm using the API "Show and hide details about a particular record" and trying to turn off the following:

"bPaginate": false,
"bLengthChange": false,
"bFilter": false,
"bSort": true,
"bInfo": false,
"bAutoWidth": false

I'm getting the following alert on page load after quite some time. The page does however work but need to remove alert.

"DataTables warning (Table ID = 'example'): Cannot reinitialise DataTable.

To retrieve the DataTables object for this table, please pass either no arguments to the DataTable() function, or set bRetrieve to true. Alternatively, to destroy the old table and create a new one, set bDestroy (Note that alot of changes to the configuration can be made through the API which is usually much faster). "

I've tried to add in bRetrieve and bDestroy to the list as true but this didn't work.

Does anyone have any ideas how to fix this?

Thanks

The Initialisation code I've used is as follows:

[code]

/* 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() {



/*
* Insert a 'details' column to the table
*/
var nCloneTh = document.createElement( 'th' );
var nCloneTd = document.createElement( 'td' );
nCloneTd.innerHTML = '';
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] );
} );



$('#example').dataTable( {
"bPaginate": false,
"bLengthChange": false,
"bFilter": false,
"bSort": true,
"bInfo": false,
"bRetrieve": true,
"bDestroy": true,
"bAutoWidth": false } );


/*
* Initialse DataTables, with no sorting on the 'details' column
*/
var oTable = $('#example').dataTable( {



"aoColumnDefs": [
{ "bSortable": false, "aTargets": [ 0 ] }

],
"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
*/
$('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 = "../examples_support/details_open.png";
oTable.fnClose( nTr );
}
else
{
/* Open this row */
this.src = "../examples_support/details_close.png";
oTable.fnOpen( nTr, fnFormatDetails(oTable, nTr), 'details' );
}
} );
} );




} );




[/code]

allan

You are initialising DataTables twice here:

[code]
$('#example').dataTable( {
"bPaginate": false,
"bLengthChange": false,
"bFilter": false,
"bSort": true,
"bInfo": false,
"bRetrieve": true,
"bDestroy": true,
"bAutoWidth": false } );

var oTable = $('#example').dataTable( {
"aoColumnDefs": [
{ "bSortable": false, "aTargets": [ 0 ] }
],
"aaSorting": [[1, 'asc']]
});
[/code]
Is that what you want to do. Or do you just want to initialise it once?

[code]
$('#example').dataTable( {
"bPaginate": false,
"bLengthChange": false,
"bFilter": false,
"bSort": true,
"bInfo": false,
"bRetrieve": true,
"bDestroy": true,
"bAutoWidth": false,
"aoColumnDefs": [
{ "bSortable": false, "aTargets": [ 0 ] }
],
"aaSorting": [[1, 'asc']]
});
[/code]
Allan

Craig

Thanks for your quick response.

Your suggestion seems to have worked.