is there a better way to switch between two tables?

ajgiv

I have two different tables, one is a most recently used table that loaded on page load and stored in div1. I have another table that is created via ajax based off search criteria and stored in div2. I use radio buttons to show/hide the divs. This is how i have it set up. I have to destroy the first table in order to get the second table, loaded from ajax, to work. I am appending the table data from an ajax request and then going to this toggleRadio() function. I seem to be having issues involving data table dissappearing when switching between tabs. is there a better way to do this?

[code]$('#radio1, #radio2, #radio3').change(function () {
toggleRadio(this.id);
});

var oTable;
function toggleRadio(op){
if (op == 'radio1') {
$('#div2').hide();
$('#div1').show();
oTable.fnDestroy();
oTable = $('#searchT').dataTable({
"sPaginationType": "full_numbers",
"aaSorting": [[ 7, "desc" ]],
"sScrollY": "475",
"aLengthMenu": [15, 25, 50],
"bScrollCollapse": false,
"iDisplayLength": 15,
"bRetrieve": true
});
}

if (op == 'radio2') {
$('#div1').hide();
$('#div2').show();
oTable = $('#mruT').dataTable(tableOpts);
oTable.fnFilter( '' );
}

if (op == 'radio3') {
$('#div1').hide();
$('#div2').show();
oTable = $('#mruT').dataTable(tableOpts);
oTable.fnFilter('Printed');
}
}

var tableOpts = {
"sPaginationType": "full_numbers",
"aaSorting": [[ 7, "desc" ]],
"aoColumnDefs": [
{ "bVisible": false, "aTargets": [ 0,1,2 ] },
{ "bSortable": false, "aTargets": [ 0,1,2 ] }
],
"sScrollY": "475",
"aLengthMenu": [15, 25, 50],
"bScrollCollapse": false,
"iDisplayLength": 15,
"bRetrieve": true
};
[/code]

drakula1234

Did you try to get this working ? I have the same situation where I need to change the table structure completely, I mean I need to ignore few columns