I am developing a Report component at Joomla 2.5.6 with DataTables 1.9.2. The report component will have a flexibility to allow users to select which Database Tables or Views to show within the DataTables, then they will print or save into a file later. Therefore I need to a kind of "destroy" an initialized DataTable, then initialize a new DataTable based on user's selection.

However, I get an error every time I do "fnDestroy" at the initialized DataTable. The error says "TypeError: b.nTable.parentNode is null" at file jquery.dataTables.min.js line 102. When I trace this error, it seems like the parentNode is supposed to fill with "div.dataTables_scrollBody" and its properties, but in my case the parentNode is null as the error says. I do not know why?

I have searched similar problem at this forum as well, and I found the similar problem reported at http://www.datatables.net/forums/discussion/comment/13331#Comment_13331, but too bad the discussion has been closed without any solution found.

Please kindly assist me on this problem as soon as possible. Thank you very much in advance.

Here it is an excerpt of my source code:

/administrator/components/com_report/views/report/tmpl/default.php


@import "./css/report_table_jui.css";
@import "./css/jquery-ui-1.8.4.custom.css";
@import "./css/TableTools_JUI.css";







jQuery.noConflict();
jQuery(document).ready(function($) {
$('#report').dataTable( {
"bProcessing": true,
"bServerSide": true,
"bLengthChange": true,
"bFilter": true,
"aaSorting": [[ 1, "desc" ]],
"sScrollX": "100%",
"bScrollCollapse": true,
"bJQueryUI": true,
"sPaginationType": "full_numbers",
"aLengthMenu": [[10, 25, 50, 100], [10, 25, 50, 100]],
"sDom": 'T<"clear">lfrtip',
"oTableTools": {
"sSwfPath": "components/com_report/swf/copy_csv_xls_pdf.swf",
"aButtons": [ "csv", "xls", "pdf" ]
},
"sAjaxSource": "components/com_report/models/tables/getData.php"
});
$('#buttonGenerateReport').live('click', function() {
[code] var oTable = $("#report").dataTable();

oTable.fnDestroy();
[/code]
oTable = $('#report').dataTable({
"aoColumns": [
{ "sTitle": "EventID", "bVisible": true},
{ "sTitle": "Date", "sWidth": "110px", "bSortable": true},
{ "sTitle": "Subject (click any column name to sort)", "sWidth": "270px", "bSortable": true},
{ "sTitle": "Result", "sWidth": "100px", "bSortable": true},
{ "sTitle": "EventID", "bVisible": true},
{ "sTitle": "Date", "sWidth": "110px", "bSortable": true},
{ "sTitle": "Subject (click any column name to sort)", "sWidth": "270px", "bSortable": true},
{ "sTitle": "Result", "sWidth": "100px", "bSortable": true},
{ "sTitle": "EventID", "bVisible": true},
{ "sTitle": "Date", "sWidth": "110px", "bSortable": true},
{ "sTitle": "Subject (click any column name to sort)", "sWidth": "270px", "bSortable": true},
{ "sTitle": "Result", "sWidth": "100px", "bSortable": true},
{ "sTitle": "EventID", "bVisible": true},
{ "sTitle": "Result", "sWidth": "100px", "bSortable": true}
],
"bServerSide": true,
"bProcessing": true,
"bLengthChange": false,
"bFilter": false,
"aaSorting": [[ 3, "desc" ]],
"sScrollX": "100%",
"bScrollCollapse": true,
"bJQueryUI": true,
"sAjaxSource": "components/com_report/models/tables/getDataEA.php"
});

if (oTable != undefined) {
oTable.fnClearTable();
};

oTable.fnDraw();
});
//});
});


<?php echo $this->form; ?>





<?php echo JText::_('COM_REPORT_BUTTON_GENERATE_REPORT'); ?>






EAs
MP Bookings
Events









Booking ID
Parent Name
Parent Mobile
Parent Relationship
Parent Email
Remark
Existing
Online
Newspaper
Magazine
Radio
Others
Rep. Name
Ref. Code





Loading data from server







<?php echo JHtml::_('form.token'); ?>