Datatables column definitions and reorder not applied after reload - php

Question

I've have many processes using the same data that gets regular updates while a user is on a page. Now I want to use datatables to show this data.
I also use the ColReorder plugin.
The problem is that I don't understand how I can force datatables to 'reload' this local var with new data.
there is is also a bunch of definitions in the "aoColums" setting, using some of the datafields for images and so on.
I changed some of the data in the dat var. The tried to force datatables to put it in the table. No luck. I can't find a decent example or function in the api to use.
if I try to use oTable.fnClearTable() and the oTable.fnAddData(data) the data gets loaded, but somehow the ColReorder is not aplied.
myTable = $('#myTable').dataTable({
"aoColumns": [ ... ],
"aaSorting": [[1, 'asc']],
"aaData": data,
"sScrollY": 200,
"sScrollX": "100%",
"sScrollXInner": "150%",
"bJQueryUI": true,
"sPaginationType": "full_numbers",
"sDom": 'R<"H"lfr>t<"F"ip>',
"iFixedColumns": 3,
"oColReorder": {
"aiOrder": [ 0, 8, 2, 3, 4, 5, 6, 7, 1, 9 ]
}
});
Any ideas?
EDIT
I've made a working jsFIddle with the whole problem explained. Take a look and have a go!

Answer 1

I read about your problem....i take another approach to your problem(it's always about dom manipulation xD)...my anwer it's not the smartest, but i think it works.
I put datatables manipulation inside a function, and add a div no the table
Then i call that function
On update i empty the div and add the same html that table have before datatbles manipulation and fill
Then a call the function to draw the whole datatables again, in that way ColReorder plugin works with the updated data.
PS: Here is the updated fiddle for more details : http://jsfiddle.net/aKuHM/5
Now the table looks like this:
<div class="Example" id="Example">
<table id="myTable" class="datatable">
<thead>
</thead>
<tbody>
</tbody>
<tfoot>
</tfoot>
</table>
</div>
And your JS its loading on the head and looks this way:
data = [
['cell1', 'cell2','cell3','cell4','cell5','cell6','cell17', 'cell8', 'cell9', 'cell10'],
['cell1', 'cell2','cell3','cell4','cell5','cell6','cell17', 'cell8', 'cell9', 'cell10'],
['cell1', 'cell2','cell3','cell4','cell5','cell6','cell17', 'cell8', 'cell9', 'cell10'],
];
function Saludos(){
$(function(){
myTable = $('#myTable').dataTable({
"aoColumns": [
{"sTitle":"col0", "bSearchable": false, "bVisible": true},
{"sTitle":"col1", "bSearchable": false, "bVisible": true},
{"sTitle":"col2", "bSearchable": true, "bVisible": true},
{"sTitle":"col3", "bSearchable": true, "bVisible": true},
{"sTitle":"col4", "bSearchable": true, "bVisible": true},
{"sTitle":"col5", "bSearchable": false, "bVisible": true},
{"sTitle":"col6", "bSearchable": true, "bVisible": true},
{"sTitle":"col7", "bSearchable": false, "bVisible": true},
{"sTitle":"col8", "bSearchable": true, "bVisible": true,
"mRender": function (data, type, row){
return '<b><i>'+ row[8] +'</i></b>';
}
},
{"sTitle":"col9", "bSearchable": false, "bVisible": false},
],
"aaSorting": [[8, 'asc']],
"aaData": data,
"sScrollY": 200,
"sScrollX": "100%",
"sScrollXInner": "150%",
"bJQueryUI": true,
"sPaginationType": "full_numbers",
"sDom": 'R<"H"lfr>t<"F"ip>',
"iFixedColumns": 3,
"oColReorder": {
"aiOrder": [ 0, 8, 2, 3, 4, 5, 6, 7, 1, 9 ]
}
});
$('#updatebutton').click(function(){
updateTable();
});
});
}
Saludos();
function updateTable(){
data[1][8] = "even bolder";
$('.Example').empty();
$("#Example").html("<table id='myTable' class='datatable'><thead></thead> <tbody></tbody><tfoot></tfoot></table>");
Saludos();
console.log(data);
}