Removing table after submitting to server, and before rendering new table

bbrock

I am having a strange problem where if I submit the current query to the server, and then change parameters (or don't) and submit again, the new table gets rendered, but there is a blank table above, here's an example of what I am talking about: https://onedrive.live.com/redir?resid=89FCD70CC7DB7CB5!3005&authkey=!AG4h0cMvBnbnKb8&v=3&ithint=photo%2c.jpg That was a screenshot after submitting 4 times. On client side, before creating the table, I [code]removeTable(#reportTable)[/code] But this just removes the data before rendering the new table. The table below will render correctly every time, but every time I click submit again, a new blank table will appear above.... Any ideas?

bbrock

I could use some help with fnDestroy, I can't figure out where to put it without destroying the table elements immediately...

bbrock

[code]
submitHandler: function(form) {
// do other stuff for a valid form
$.post('../perftool/syscalc2/main.php', $("#bandwidth").serialize(), function(data) {
removeTable("reportTable");
jsArray = JSON.parse(data);

if (jsArray.length < 1) {
getCheckboxStatus();
} else {
var myDiv = document.getElementById('report');
var myTable = document.createElement('TABLE');
var systemRecordLength = 8;

myTable.setAttribute("id","reportTable");
myTable.style.borderCollapse = "collapse";
myTable.width = "100%";
myDiv.appendChild(myTable);

makeTable(jsArray);
}
});
}
[/code]


and here is the function to apply datatables
[code]function makeTable(jsArray) {
// debug(jdata);

$(document).ready(function() {
var myTable = $('#reportTable').dataTable({
"aaData": jsArray,
"aaSorting": [
[ 16, "asc" ]
],
"aoColumnDefs": [

{ "aTargets": [0],
"bSortable": false,},

{ "aTargets": [1],
"bSortable": false },

{ "aTargets": [2],
"bSortable": false },

{ "aTargets": [3],
"bSortable": false },

{ "aTargets": [6],
"bSortable": false },

{ "aTargets": [7],
"bSortable": false },

{ "aTargets": [8],
"bSortable": false },

{ "aTargets": [11],
"bSortable": false },

{ "aTargets": [12],
"bSortable": false},

{ "aTargets": [13],
"bSortable": false}
],
"aoColumns": [
{ "sTitle": "Model" },
{ "sTitle": "Controller Description" },
{ "sTitle": "Controller Qty" },
{ "sTitle": "Controller Part Numbers" },
{ "sTitle": "Controller List Price" },
{ "sTitle": "Controller Ext. List Price" },
{ "sTitle": "Disk Description" },
{ "sTitle": "Disk Qty" },
{ "sTitle": "Disk Part Numbers" },
{ "sTitle": "Disk List Price" },
{ "sTitle": "Disk Ext. List Price" },
{ "sTitle": "Shelf Description" },
{ "sTitle": "Shelf Qty" },
{ "sTitle": "Shelf Part Numbers" },
{ "sTitle": "Shelf List Price" },
{ "sTitle": "Shelf Ext. List Price" },
{ "sTitle": "System Price" },
{ "sTitle": "Usable Capacity (TB)" },
{ "sTitle": "IOPs" },
{ "sTitle": "Bandwidth (MB/s)" },
{ "sTitle": "ART (ms)" },
{ "sTitle": "Rack Space" },
{ "sTitle": "Watts" },
{ "sTitle": "BTUs" }
]
} )
} );

}
[/code]

bbrock

So I commented out removeTable('reportTable'); and added "bDestroy": true to the makeTable function, within datatables. This sort of fixes the problem, however, on the third sumbit a new table is created and the old table pushed down. The old table stays there and never gets changed, and from here on out the above table will reinitialize correctly... what gives?

bbrock

I figured it out! Heres what I did:
[code]
$("#bandwidth").validate({
debug: false,
rules: {

},
messages: {

},
submitHandler: function(form) {
// do other stuff for a valid form
$.post('../perftool/syscalc2/main.php', $("#bandwidth").serialize(), function(data) {
destroyTable(); // ADDED THIS FUNCTION CALL
removeTable("reportTable");

jsArray = JSON.parse(data);


if (jsArray.length < 1) {
getCheckboxStatus();
} else {

//debug(jsArray);

var myDiv = document.getElementById('report');
var myTable = document.createElement('TABLE');
var systemRecordLength = 8;

myTable.setAttribute("id","reportTable");
myTable.style.borderCollapse = "collapse";
myTable.width = "100%";
myDiv.appendChild(myTable);

makeTable(jsArray);
}
});
}
});
});
[/code]
And here is the function
[code]
function destroyTable() {
var myElem = document.getElementById('reportTable');
if(myElem != null){
var oTable = $('#reportTable').dataTable();
oTable.fnDestroy();
}
}
[/code]

viola! I love DataTables!!! :)