重新加载后未应用数据表列定义和重新排序

Question

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

我也使用 ColReorder 插件。

问题是我不明白如何强制数据表用新数据“重新加载”这个本地变量。

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

我更改了 dat var 中的一些数据。试图强制数据表将其放入表中。没有运气。我在 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，并解释了整个问题。看看就走吧！

Answer 1

我读到了您的问题....我对您的问题采取了另一种方法（总是关于 dom 操作 xD）...我的答案不是最聪明的，但我认为它有效。

• 我将数据表操作放在一个函数中，并在表中添加一个 div
• 然后我调用那个函数
• 更新时，我清空 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);

        }