Forcing Table Rebuild w/fnDestroy & fnClearTable

jwap

I'm currently working with a table that is refreshed in page based on user actions. Users are able to enter in a search string and the table opens on a new DIV with the results. I'm having issues getting the table to work properly once it has been initialized. I've tried using fnDestroy as well as fnClearTable but am running into a few different issues.

When using fnClearTable, I get this error when trying to reload the table:

"DataTables warning (table id = 'add_assets_table'): 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 destory the old table and create a new one, set bDestory to true (note that a lot of changes to the configuration can be made through the API which is usually much faster)."

When using fnDestroy, I get this error upon reload:

"c.parentNode is null"

Any help would be greatly appreciated.

-Jamie



Here is the code:

[code]

$("#searchbutton1").click(function() {
configureAddAssetsTable();
$("#search_term").text($("#add_group_search_field").val());
open_search_overlay();
});

------------------------------->

function configureAddAssetsTable()
{

if ( typeof(add_table) != "undefined") {

add_table.fnClearTable( 0 );
add_table.fnDraw();


//add_table.fnDestroy(); <------

}

add_table = $('#add_assets_table').dataTable
({"oSearch": {"sSearch": $("#add_group_search_field").val()},
"bProcessing": true,
"bJQueryUI": true,
"bServerSide": true,
"sPaginationType": "full_numbers",
"bSort": false,
"sAjaxSource": './1/group_add_data.js',
"fnServerData": function ( sSource, aoData, fnCallback )
{
var filter = $('#add_category_filter').val();
var sort = $('#add_sort_assets').val();
aoData.push( { "name": "filter", "value": filter } );
aoData.push( { "name": "sort", "value": sort } );


$.getJSON( sSource, aoData, function (json) {
fnCallback(json);
});
},
"fnInitComplete": function() {




setTimeout("initialize_tooltips()", 200);
setTimeout("color_code_rows()", 200);


},
"aoColumns":
[
{
"sWidth":"80px",
"fnRender": function ( oObj ) {
return oObj.aData[1]
}
},

{
"sWidth":"60px",
"sClass": "center",
"fnRender": function ( oObj ) {
return 'View Details'
}

},



{
"sClass": "center",
"sWidth": "25%",
"fnRender": function ( oObj ) {
return '' + oObj.aData[2] + ''
}
},

{
"sWidth":"100px",
"sClass": "center",
"fnRender": function ( oObj ) {
return ""
}
},
{
"bVisible": false
},
{
"bVisible": false
}

]

});


}[/code]

allan

Can you link us to an example please? It would be interesting to know what c.parentNode is. Also are you using 1.7.3?

Allan

jwap

Hey Allen,
Yes, we are using 1.7.3 . Unfortunately, this application is currently running only on our internal dev server. I'll try to link up as much info/code/screenshots as possible. From what I've been able to uncover, the c.parentnode issue relates to an HTML element not closing properly. Since this only occurs post-fnDestroy, it would lead me to believe that some important page element is being wiped out along with the data table itself.

Also, if there is a way of accomplishing a table refresh using a method other then the ones I'm trying, any ideas would be appreciated. All I really need is to be able to have the data table change to reflect new charater searches.


Here is the HTML code section of the page where the data table is rendered:

[code]






Filter by:


All
Type
Owner
Asset


Sort by:


Category
Name







Cancel
Add Selected Items







Name
 
Category
Add to Group











[/code]

dvnandover

Did you get a resolution on this issue? I am having the same problem and would like to know if you could share the resolution.

dvnandover

using dataTableOjb.fnDestroy(); would work for me. The dataTable refresh nicely everytime the user select different criteria(s).