重新加载后未应用数据表列定义和重新排序 - Datatables column definitions and reorder not applied after reload

我有许多使用相同数据的进程，当用户在页面上时，这些数据会得到定期更新。现在我想使用数据表来显示这些数据。

我也使用ColReorder插件。

问题是，我不明白我怎么能强迫数据表'重新加载'这个本地变量与新的数据。

在"aoColums"设置中也有一堆定义，使用一些数据字段用于图像等。

我更改了data变量中的一些数据，试图强制数据表将其放入表中。没有运气。我在api中找不到一个像样的例子或函数来使用。

如果我尝试使用oTable.fnClearTable()和oTable.fnAddData(data)数据被加载，但不知何故ColReorder不应用。

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

任何想法?

编辑我已经制作了一个可以工作的jsFIddle，并解释了整个问题。看一看，试一试!

我读了你的问题....我采取另一种方法来解决你的问题(它总是关于dom操作xD)…我的答案不是最聪明的，但我认为它有效。

我将数据表操作放在一个函数中，并在表
在更新我空的div和添加相同的html表之前的数据操作和填充
然后调用函数再次绘制整个数据表，以这种方式ColReorder插件与更新的数据一起工作。

PS:这里是更新的小提琴更多的细节:http://jsfiddle.net/aKuHM/5

现在表看起来像这样:

<div class="Example" id="Example">
<table id="myTable" class="datatable">
 <thead>
 </thead>
   <tbody>
   </tbody>
 <tfoot>
 </tfoot>
</table>
</div>

你的JS在头部加载，看起来像这样:

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