3

我在同时更新同一页面中的两个数据表（使用角度数据表）时遇到问题。

我的 HTML 如下所示：

<table id="datatable1" ng-if="Ctrl.dtOptions1" datatable="" dt-options="Ctrl.dtOptions1" dt-column-defs="Ctrl.dtColumnDefs1" class="row-border hover"></table>
<table id="datatable2" ng-if="Ctrl.dtOptions2" datatable="" dt-options="Ctrl.dtOptions2" dt-column-defs="Ctrl.dtColumnDefs2" class="row-border hover"></table>

我的 js（简化版）如下所示：

var self = this;
var dtInstance1;
var dtInstance2;
DTInstances.getList().then(function(dtInstances) {
    dtInstance1 = dtInstances.datatable1;
    dtInstance2 = dtInstances.datatable2;
});

self.searchButtonClick = function() {
    myService.getData(myCriteria).then(function(rows) {
        self.dtColumnDefs1 = [ ... ];
        self.dtOptions1 = DTOptionsBuilder.newOptions()
            .withOption('fnServerData', function (sSource, aoData, fnCallback) {
                // Do some work with rows and aoData
                fnCallBack(json);
        });
        self.dtColumnDefs2 = [ ... ];
        self.dtOptions2 = ...;

        if(dtInstance1) {dtInstance1.rerender();}
        if(dtInstance2) {dtInstance2.rerender();}
    }
}

在这段代码的最后，当我只放了两个重新渲染中的一个时，对应的表就更新好了（不管是datatable1还是datatable2）。

但是当我把这两个 rerender 调用（不管顺序），有一些意想不到的结果。我收到消息Error: Node was not found并且 datatable2 消失了。datatable1 更新得很好。但是，如果我再试一次， datatable1 也会消失（带有相同的错误消息）。

错误堆栈跟踪是：

Error: Node was not found
@http://localhost:3000/bower_components/datatables/media/js/jquery.dataTables.js:9034:4
_Api.prototype.iterator@http://localhost:3000/bower_components/datatables/media/js/jquery.dataTables.js:6827:11
@http://localhost:3000/bower_components/datatables/media/js/jquery.dataTables.js:8967:0
_Api.extend/methodScoping/<@http://localhost:3000/bower_components/datatables/media/js/jquery.dataTables.js:6990:15
rerender@http://localhost:3000/bower_components/angular-datatables/dist/angular-datatables.js:828:12
rerender@http://localhost:3000/bower_components/angular-datatables/dist/angular-datatables.js:492:8
self.search/</</<@http://localhost:3000/scripts/controllers/search.js:390:20

我首先认为重新渲染会破坏一些参考或其他东西......我试图在两个重新渲染之间设置超时，但我得到了同样的错误。我还尝试在第一次重新渲染后 5 秒再次检索我的实例，然后调用第二个，如下所示：

if(dtInstance1) {dtInstance1.rerender();}
DTInstances.getList().then(function(dtInstances) {
    dtInstance2 = dtInstances.datatable2;
    dtInstance2.rerender();
});

但仍然是同样的错误......

- 编辑 -

我无法在 plunker 中重现此错误...

但是，似乎添加第三个隐藏表可以解决此错误...

<div ng-hide="true">
  <table datatable="" dt-options="dtOptionsFake" dt-column-defs="dtColumnDefsFake"></table>
</div>


// FAKE TABLE
$scope.dtColumnDefsFake = [
    DTColumnDefBuilder.newColumnDef(0).withTitle('fake')
];
$scope.dtOptionsFake = DTOptionsBuilder.newOptions()
    .withDataProp('data')
    .withOption('serverSide', true)
    .withOption('processing', true)
    .withPaginationType('full_numbers')
    .withOption('fnServerData', function (sSource, aoData, fnCallback) {
         fnCallback({
            'draw': 1,
            'recordsTotal': 1,
            'recordsFiltered': 1,
            'data': [['0']]
         });
});

我真的不知道这怎么可能，但是在不改变任何内容的情况下添加这些确切的行可以解决异常...

但是，此外，如果未修改列定义，则不会重新呈现数据表。我在 github 上写了一个问题，这里是说明它的plunkr。

所以异常被“解决”但我的问题仍然存在，因为我无法在不更改标题的情况下重新呈现我的数据表......

4

1 回答 1

1

只需将您的表格包装到一个 div 中，它就会起作用

<div id="wrap_1">
<table id="datatable1" ng-if="Ctrl.dtOptions1" datatable="" dt-options="Ctrl.dtOptions1" dt-column-defs="Ctrl.dtColumnDefs1" class="row-border hover"></table>
</div>
<div id="wrap_2">
<table id="datatable2" ng-if="Ctrl.dtOptions2" datatable="" dt-options="Ctrl.dtOptions2" dt-column-defs="Ctrl.dtColumnDefs2" class="row-border hover"></table>
</div>
于 2015-05-04T11:23:36.217 回答