javascript - 重新渲染两个 Angular 数据表

Question

我无法同时更新同一页面中的两个数据表(使用 Angular 数据表)。

我的 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)。

但是当我进行两次重新渲染调用时(无论顺序如何)，会出现一些意想不到的结果。我收到消息 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']]
         });
});

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

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

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

Answer 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>