Quantcast
Channel: DataTables 1.9 — DataTables forums
Viewing all articles
Browse latest Browse all 1816

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

$
0
0
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 :


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. :&nbsp;&nbsp; From : <input type="text" id="id_mtr_from" name="txt_mtr_from" style="height: 22px; ">&nbsp;&nbsp;
		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>



Viewing all articles
Browse latest Browse all 1816

Latest Images

Trending Articles



Latest Images