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 :
HTML Code :
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 :
TableTools.BUTTONS.download = { "sAction": "text", "sTag": "default", "sFieldBoundary": "", "sFieldSeperator": "\t", "sNewLine": "<br>", "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" } }); } }); });
HTML Code :
<body> <div id="main_container"> Meter Serial No. : From : <input type="text" id="id_mtr_from" name="txt_mtr_from" style="height: 22px; "> To : <input type="text" id="id_mtr_to" name="txt_mtr_to" style="height: 22px; "> <br> </div> <br><br> <div id="div_prepack1" style="border-width: 2px; border-style: ridge;" > <br> <input type="button" id="id_prepack" name="btn_prepack" value="Prepack DataTable" style="height: 25px; "> <input type="button" id="id_demo" value="click demo.." style="height: 25px; "> <br><br> <div id="demo_prepack1" style="padding-left: 2px; padding-right: 2px;"> <table id="prepack" class="display" cellpadding="0" cellspacing="0" border="0" width="98%"> <thead> <tr> <th>Meter Serial No.</th> <th>Site Name</th> <th>Start Date</th> <th>Pass Flag</th> <th>Employee Name</th> <th>Last Update </th> </tr> </thead> <tbody> <tr> <td colspan="6">Loading Data From Server... </td> </tr> </tbody> </table > </div> <br><br> <div id="demo_prepack2" style="padding-left: 2px; padding-right: 2px; border-style: solid;"> <table id="prepack_new" class="display" cellpadding="0" cellspacing="0" border="0" width="98%"> <thead> <tr> <th>Meter Serial No.</th> <th>Site Name</th> <th>Start Date</th> <th>Pass Flag</th> <th>Employee Name</th> <th>Last Updated </th> </tr> </thead> <tbody> <tr> <td colspan="6">Loading Data From Server... </td> </tr> </tbody> </table > </div> </div> <br><br> </body>