Question

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

我也使用ColReorder插件。

问题在于我不明白如何强制数据表使用新数据“重新加载”本地var。

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

我更改了dat var中的一些数据。试图强制数据表将其放入表中。没运气。我在api中找不到合适的例子或功能。

如果我尝试使用oTable.fnClearTable（）和oTable.fnAddData（数据）来加载数据，但不知道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并在数据表操作和填充
然后调用该函数再次绘制整个数据表，这样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);

        }

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

1 个答案: