重新渲染两个角度数据表答案

【问题标题】：Rerender two angular-datatables重新渲染两个角度数据表
【发布时间】：2015-05-31 23:21:52
【问题描述】：

我无法同时更新同一页面中的两个数据表（使用 angular-datatable）。

我的 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();}
    }
}

在这段代码的最后，当我只放了两个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']]
         });
});

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

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

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

【问题讨论】：

你能做个小提琴吗？
@dmullings 我正在研究它，但奇怪的是我无法在我的 plunkr 中重现它......
我编辑了我的帖子，为您带来一些新信息

标签： javascript angularjs jquery-datatables rerender

【解决方案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>

【讨论】：