How to remove the datatable object before to create a new one ?

kavittp

Dear Allan..,
I have a problem with dataTable plugin... actually i am a new user for dataTable plugin.
this is my second post..earlier i also post a problem like "how to reinitialize a dataTable"..but that discussion didn't work for me...
now i focus on a new approach to solve my problem..
ok..first of all i am telling you what i did through my code...

I have two text boxes (Meter Sr. no. "from" and "To") and a button with its id "id_prepack".
now i put two different values in textboxes like "from"=00251000 and "to"=00251050
and onclick event of that button i am calling my dataTable. this time dataTables working fine..and records (no. of records=50) successfully populated in dataTables.

after that i used "fnDestroy" to destroy that dataTable (table name="prepack") as mentioned in following code.

now i change textbox values like "from"=00251000 and "to"=00251020
and clicked on button again to initialize a new dataTable (table name = "prepack_new")...according to condition as a result.. new records (no. of records=20) should populate in new table "prepack_new"..

but this time the new table "prepack_new" draws successfully..but the records populated in it belongs to old table "prepack"
...(means in new table "prepack_new" data comes from old table 'prepack")....which are already destroyed....then how it is possible to come data from already destroy table..

You can see my code as following attached here....may be i have done some mistack somewhere .... Please help me to sort out these problem..
Its very urgent for my application and for me everything is depends on it ....

I just want to "destroy the old dataTable containing old records" and "draw and initialize a fresh new dataTable containing new records" in place of earlier one..

Thanks in advance... i am waiting for your reply..

code is here :

Javascript Code :

[code]

TableTools.BUTTONS.download = {
"sAction": "text",
"sTag": "default",
"sFieldBoundary": "",
"sFieldSeperator": "\t",
"sNewLine": "
",
"sToolTip": "Download Excel",
"sButtonClass": "DTTT_button_xls", //eariler was "DTTT_button_text"
"sButtonClassHover": "DTTT_button_xls_hover", //earlier was "DTTT_button_text_hover"
"sButtonText": "Download",
"mColumns": "all",
"bHeader": true,
"bFooter": true,
"sDiv": "",
"fnMouseover": null,
"fnMouseout": null,
"fnClick": function( nButton, oConfig ) {
var oParams = this.s.dt.oApi._fnAjaxParameters( this.s.dt );
var iframe = document.createElement('iframe');
iframe.style.height = "0px";
iframe.style.width = "0px";
iframe.src = oConfig.sUrl+"?"+$.param(oParams);
document.body.appendChild( iframe );
},
"fnSelect": null,
"fnComplete": null,
"fnInit": null

};

var oTable;

$(document).ready(function () {

$('#id_prepack').click(function() {

var button_id=$(this).attr('id');
alert(button_id);

var str_mtr_from=document.getElementById("id_mtr_from").value;
var str_mtr_to=document.getElementById("id_mtr_to").value;

if(typeof oTable=='undefined')
{
oTable = $("#prepack").dataTable({
"bDestroy":true,
"bJQueryUI": true,
"bServerSide": true,
"bAutoWidth": true,
"sAjaxSource": "/web_trial_one/SourceMeter?button_name="+button_id+"&txt_mtr_from="+str_mtr_from+"&txt_mtr_to="+str_mtr_to,
"bProcessing": true,
"sPaginationType": "full_numbers",
"sDom": 'T<"clear">lfrtip', //'<"H"Tfr>t<"F"ip>' to print tabletool in UI theme within border.
"oTableTools": {
"aButtons": [ "copy","csv","xls","pdf",
{
"sExtends": "download",
"sButtonText": "Download Excel",
"sUrl": "/web_trial_one/prepack_download"
}

],
"sSwfPath": "./table_tool2.0/media/swf/copy_cvs_xls_pdf.swf"
}

});

}
else
{
alert("test");

oTable.fnClearTable(false); // Here i do not want to redraw the table.

oTable.fnDestroy(true); //Here i am Completely remove the table from the DOM

$("#prepack_new").dataTable({
"bDestroy":true,
"bRetrieve": false,
"bJQueryUI": true,
"bServerSide": true,
"bAutoWidth": true,
"sAjaxSource": "/web_trial_one/SourceMeter?button_name="+button_id+"&txt_mtr_from="+str_mtr_from+"&txt_mtr_to="+str_mtr_to,
"bProcessing": true,
"sPaginationType": "full_numbers",
"sDom": 'T<"clear">lfrtip', //'<"H"Tfr>t<"F"ip>' to print tabletool in UI theme within border.
"oTableTools": {
"aButtons": [ "copy","csv","xls","pdf",
{
"sExtends": "download",
"sButtonText": "Download Excel",
"sUrl": "/web_trial_one/prepack_download"
}

],
"sSwfPath": "./table_tool2.0/media/swf/copy_cvs_xls_pdf.swf"
}

});
}

});

});



[/code]



HTML Code :

[code]





Meter Serial No. :   From :   
To :





















Meter Serial No.
Site Name
Start Date
Pass Flag
Employee Name
Last Update





Loading Data From Server...















Meter Serial No.
Site Name
Start Date
Pass Flag
Employee Name
Last Updated





Loading Data From Server...


















[/code]

bssehra

I'm not sure if I'm getting you right.

Try to completely remove thead and tbody of the html table before you dynamically rebuild and bind to datatable. Something like below:

[code]var tableObjThead = $("#yourtable > thead");

var tableObjTbody = $("#yourtable > tbody");

tableObjThead.remove();

tableObjTbody.remove();
[/code]
You'll left with just table shell now.

May be now you can append structure to your table like below: (to populate with dynamic data later on)

[code]$("#yourtabale").append("");[/code]

Now dynamically build all tableheaders cells like

[code]meter snositename.............[/code]

and append it to the thead as given below

[code]$("#yourtabale").find("thead").append(header_row);[/code]

Similarly you have to create tablerows to append to the tbody of your table

[code]..........[/code]

once you have dataTables compliant html table you can bind it to datatable using bDestroy: true

Hopefully it should resolve your issue.

Thanks

kavittp

Dear @bssehra ..

First of all thanks for your suggession...and i applied it with my code but still my problem is not sort out..
and still i am getting old records from already destroyed dataTable ("prepack")..

Additionaly ..apart from your suggestion...i also tried to use following concept in my code like..

[code]

// Destroy each datatable in the div
var allTables = jQuery('#demo_prepack1 table.display');
for(var i = 0; i < allTables.length; i++)
{
jQuery('#' + allTables[i].id).dataTable().fnDestroy();
}
// Clear the DIVs html
jQuery('#demo_prepack1').html('');

[/code]

(in above code "demo_prepack1" is id of "div" which contains the dataTable "prepack".. as mentioned in above HTML Code)
and then to confirm whether "div" contains any dataTable or not..i used "alert" also like..

[code]
alert(document.getElementById("demo_prepack1").innerHTML);
[/code]

and it will give me blank message box..that means "div" container with its dataTable ("prepack") is destroyed..ok

Now Here..I am showing you that how i used the above piece of code in my existing code ..Please Check if there is any mistack ..

[code]

var oTable;

$(document).ready(function () {

$('#id_prepack').click(function() {

var button_id=$(this).attr('id');
alert(button_id);

var str_mtr_from=document.getElementById("id_mtr_from").value;
var str_mtr_to=document.getElementById("id_mtr_to").value;

if(typeof oTable=='undefined')
{
oTable = $("#prepack").dataTable({
"bDestroy":true,
"bJQueryUI": true,
"bServerSide": true,
"bAutoWidth": true,
"sAjaxSource": "/web_trial_one/SourceMeter?button_name="+button_id+"&txt_mtr_from="+str_mtr_from+"&txt_mtr_to="+str_mtr_to,
"bProcessing": true,
"sPaginationType": "full_numbers",
"sDom": 'T<"clear">lfrtip', //'<"H"Tfr>t<"F"ip>' to print tabletool in UI theme within border.
"oTableTools": {
"aButtons": [ "copy","csv","xls","pdf",
{
"sExtends": "download",
"sButtonText": "Download Excel",
"sUrl": "/web_trial_one/prepack_download"
}

],
"sSwfPath": "./table_tool2.0/media/swf/copy_cvs_xls_pdf.swf"
}

});

}
else
{
alert("test");

// Destroy each datatable in the div
var allTables = jQuery('#demo_prepack1 table.display');
for(var i = 0; i < allTables.length; i++)
{
jQuery('#' + allTables[i].id).dataTable().fnDestroy();
}
// Clear the DIVs html
jQuery('#demo_prepack1').html('');

alert(document.getElementById("demo_prepack1").innerHTML); // To confirm whether div ("demo_prepack1") containing anything or not.


$("#prepack_new").dataTable({
"bDestroy":true,
"bRetrieve": false,
"bJQueryUI": true,
"bServerSide": true,
"bAutoWidth": true,
"sAjaxSource": "/web_trial_one/SourceMeter?button_name="+button_id+"&txt_mtr_from="+str_mtr_from+"&txt_mtr_to="+str_mtr_to,
"bProcessing": true,
"sPaginationType": "full_numbers",
"sDom": 'T<"clear">lfrtip', //'<"H"Tfr>t<"F"ip>' to print tabletool in UI theme within border.
"oTableTools": {
"aButtons": [ "copy","csv","xls","pdf",
{
"sExtends": "download",
"sButtonText": "Download Excel",
"sUrl": "/web_trial_one/prepack_download"
}

],
"sSwfPath": "./table_tool2.0/media/swf/copy_cvs_xls_pdf.swf"
}

});
}

});

});



[/code]

So when i tried the above code...it didn't solve my problem...

and you can see one thing that i already used "fnDestroy(true)"....that means dataTable should be destroy with its all DOM element... but i think may be i am doing wrong somewhere...

I just want to "destroy the old dataTable containing old records" and "draw and initialize a fresh new dataTable containing new records" in place of earlier one..

Please help me to solve this problem....its very urgent for me...
i am waiting for ur reply..Thanks in advance..

bssehra

Try using below if dataTable already bound

[code]var oTableVar1 = $("#yourtable").dataTable();

oTableVar1.fnClearTable();[/code]

bssehra

I guess it should be first line in your else block