DataTables fnDestroy error

dnugrohoMC

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'); ?>

allan

Please link us to a test case showing the problem so we can reproduce the error and fix it. You can use http://live.datatables.net if you are not able to publish your web-site.

Allan

dnugrohoMC

Thank you, Allan for your quick response.

I am not very sure how I can use http://live.datatables.net at your suggestion to show my case, since my case should be integrated with Joomla framework. Meanwhile I am doing the development work at an office laptop (MacBook on OS X 10.8) with Joomla 2.5.6 installed. Therefore it is difficult as well to show you the test case.

I am thinking to setup a live Joomla site with my test case to let you evaluate it. Hope I can work on it soon.

In the meantime, do you have any clues on the error "TypeError: b.nTable.parentNode is null" at file jquery.dataTables.min.js line 102 ? The parentNode is supposed to be "div.dataTables_scrollBody" ??? Or anybody else working with Joomla framework encountered same problem?? Please help me.

Thanks once again.

dnugrohoMC

Just would like to conclude this discussion.

Finally I have found my solution with combination of Joomla ModelList and JQuery TableSorter http://tablesorter.com/docs/. Nevertheless I admit that the Jquery DataTables is more fancy and has more features than the TableSorter has, but it is just too bad somehow I cannot use the DataTables at my Joomla Component.

I just wonder whether my above problem due to conflict between JQuery framework and Joomla MooTools framework ????