Datatables column definitions and reorder not applied after reload

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);

        }