Column Reordering and Hiding not working

datauser

I am using DataTables 1.9 and ColReorder 1.0.8. I actually have two tables, one that creates a list of items, and upon fnInitComplete creates specific table headers in the DOM for the next table and also creates the next DataTable from within fnInitComplete. All data is pulled via ajax, so I cannot re-create it exactly here. I will do my best.The first table can show/hide columns in the second table via checkboxes with values corresponding to the sTitle of specific columns. To do so, it creates a javascript array with indexed by the sTitle(also the value of unique checkbox) with value equal to the dataTable().fnSettins().aoColumns[index] object for that particular column.
The problem I am having is that when I hide a column, re order other visible columns, and un-hide a column, the actual data reverts to its original placement as it was immediately after initialization. Can some one please explain this, and/or help me fix it?

Here's the best I can do as far as replicating code:
[code]
Map = {};
$("#table1").dataTable({
"sDom":'<"H"Tfr>t<"F"ip>',
"oTableTools": {
"fnRowSelected": function (nodes) {
$(nodes).find("input[type='checkbox']").each(function() {
var iCol = $(this).val(); }
},
"fnRowDeselected": function (nodes) {
$(nodes).find("input[type='checkbox']").each(function() {
var iCol = $(this).val(); }
},
"sRowSelect": "multi",
"aButtons": ["select_all", "select_none"]
},
"fnInitComplete": function(json) {
//append table headers from json results into "#table2 thead tr"
oTable = $("#table2").dataTable({
"sDom": 'R<"H"lTfr>t<"F"ip>',
"fnDrawCallback": function() {
populateMap();
}
});
populateMap();
}
});

function populateMap() {
var that = $("#table2");
Map[that.attr("id")] = {};
for (var i = 0; i < that.dataTable().fnSettings.aoColumns.length;i++) {
Map[that.attr("id")][""+that.dataTable().fnSettings().aoColumns[i].sTitle + ""] = that.dataTable.fnSettings().aoColumns[i];
}
}
[/code]
I left out the server side stuff because I see no way for the community to be able to access my data, and I do not have a jsFiddle or any other such account. So here is my attempt at sample html, preloaded(including headers).
[code]

...Skip this part because it's irrelevant...


...a few tds...



...a few tds...



...a few tds...


...etc...







Column1
Column 2
Column 3




Some data1
Some data2
Some data3


More data1
More data2
More data3



[/code]

My issue is that whenever any column is reordered, then any column is hidden then shown again, the data reverts to original placement, but the table headers remain in the different order.
If any one could help, that'd be great!