jQuery DataTable 在加载数据后丢失列 headers

Question

我有一个 angular 指令，其中包含以下用于 table 占位符的模板代码：

<table class="table table-striped table-bordered table-hover" id="testTableId">
    <thead>
        <tr>
            <th ng-repeat="column in columns">{{columns}}</th>
        </tr>
    </thead>
</table>

我正在尝试从指令中的控制器中加载 table 数据。

var table = $('#testTableId').DataTable({
                responsive: true,
                serverSide: true,
                ajax: {
                    url: myUrl,
                    dataSrc: ''
                },
                fnServerData: function (sSource, aoData, fnCallback, oSettings) 
                {
                    oSettings.jqXHR = $.ajax({
                        url: myUrl,
                        success: function (json, status, xhr) {
                            //Do stuff
                        }
                    });
                }    
            });

数据在 table 中加载，但我在控制台中出现以下错误：

TypeError: 无法读取未定义的属性 'childNodes'

我的 table headers 不见了，如果我检查 HTML 我可以看到我的 ng-repeat 指令已被注释掉。

请帮忙？

已添加：

如果我预先在指令外渲染 table。将数据加载到 table 有效。看起来这是某种时间问题。

Answer 1

这里的问题是您的选择器 $('#testTableId') 没有找到元素，导致 var table = undefined。似乎停止了其余代码的执行。我的建议是避免使用 jQuery 来完成这项任务。您可以先加载数据，然后使用 HTML.

处理它

JS

app.controller('MainCtrl', function($scope) {
    $scope.data;
    $scope.columns = ['something', 'somethingElse'];

    activate();

    function activate() {
      getData();
    }

    function getData() {
      //Do your request to get the data
      yourRequest().then(function(response) {
        $scope.data = response;
      }); 
    }
});

HTML

<table class="table table-striped table-bordered table-hover" id="testTableId">
    <thead>
        <tr>
            <td ng-repeat="column in columns">{{columns}}</td>
        </tr>
    </thead>
    <tbody>
        <tr ng-repeat="row in data></tr>
    </tbody>
</table>

Answer 2

我使用了这个问题的解决方案来解决问题：

enter link description here

似乎是加载数据前repeat没有完成的问题

jQuery DataTable 在加载数据后丢失列 headers

jQuery DataTable loses column headers after the data has been loaded

datatables

angularjs

angularjs-directive