Cannot reinitialise Datatable

epx

Hi there,

am really impressed with table manipulation from DataTables!

But I got a little prob ... I have a table created server-side which displayed just fine in DataTables. I then added the show/hide feature to display a message field for each row, and the DataTable displays fine, but the error message 'DataTables warning (table id = 'EnquiriesTable'): Cannot reinitialise DataTable' appears in a pop-up.

The suggested responses don't seem to help, and I'm not sure what is causing this or how to prevent it, so any wise words for a JS/jQ newbie?

Thanks

My DataTables calls are :-

[code]
$(document).ready(function() {
$('#EnquiriesTable').dataTable({
"bDestroy": true,
"sPaginationType": "full_numbers",
"aoColumns": [
/* Date */ null,
/* Name */ null,
/* Phone */null,
/* Product */null,
/* Company */null,
/* Del */null,
/* Done */null,
/* Msg */{"bVisible": false }
] } );
});
/* Formating function for row details */
function fnFormatDetails(oTable, nTr) {
var aData = oTable.fnGetData(nTr);
var sOut = '';
sOut += 'Message:' + aData[7] + '';
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";

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

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

/*
* Initialse DataTables, with no sorting on the 'details' column
*/
var oTable = $('#EnquiriesTable').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
*/
$('#EnquiriesTable tbody td img').live('click', function() {
var nTr = this.parentNode.parentNode;
if (this.src.match('details_close')) {
/* This row is already open - close it */
this.src = "js/images/details_open.png";
oTable.fnClose(nTr);
}
else {
/* Open this row */
this.src = "js/images/details_close.png";
oTable.fnOpen(nTr, fnFormatDetails(oTable, nTr), 'details');
}
});
});
[/code]

and my table data is:-
[code]


DateNamePhoneProductCompany   

31/1/2011erikeriktelBaroque violin bowerikcoerik


[/code]
epx

allan

The problem is basically as the error suggests - you are trying to initialise the same table twice. DataTables doesn't allow changing of features are run time (although configurations options such as sorting obviously can be done using the fnSort API function). So do you really want to reinitialise the table (in which case pass in bDestroy: true - which you are for the first initialisation but not the second - which is the one which is doing the re-initialisation)? Or do you just want to set the sorting? Or do you want to combine the two statements into one?

Allan

epx

Allan

all fixed with your help, and lesson #1 in JS/jQ completed.

Many thanks

epx