Question

我正在尝试使用Angularjs框架创建一个jQuery Datatable，使用此example中的第二个答案。一旦ng-repeat完成加载表，我将初始化DataTable（）。

箭头，过滤器和搜索栏会显示，但由于某些原因，如果单击它们，箭头不会排序。它们在向上和向下之间切换，但不进行排序。当我希望它用于行中的实际值时，搜索框也会按标题名称进行搜索。

当单击一个按钮并收到HTTP响应时，将填充表的“itms”，因此在呈现整个表之前不会调用.DataTable（）。

我还测试了一个表格，其中itms是硬编码的，它完美无缺。我错过了什么？

JS：

angular.module('abcapp')
.directive('repeatDone', function() {
    return function(scope, element, attrs) {
        if (scope.$last) { // all are rendered
            $('#my-table').DataTable();
        }
    }
})

HTML：

<div ng-if="itms && itms.length > 0" class="row">
 <table id="my-table" class="table table-striped" cellspacing="0" width="100%">
    <thead>
        <tr>
            <th>a</th>
            <th>b</th>
            <th>c</th>
            <th>d</th>
        </tr>
    </thead>
    <tfoot>
        <tr>
            <th>a</th>
            <th>b</th>
            <th>c</th>
            <th>d</th>
        </tr>
    </tfoot>
    <tbody>
      <tr ng-repeat="itm in itms track by $index" repeat-done>
        <td>{{itm.a}}</td>
        <td>{{itm.b}}</td>
        <td>{{itm.c}}</td>
        <td>{{itm.d}}</td>
      </tr>
    </tbody>
  </table>
</div>

Answer 1

在$ timeout中包装jQuery调用：

  .directive('repeatDone', function($timeout) {
    return function(scope, element, attrs) {
      if (scope.$last) { // all are rendered
        $timeout(function() {
          $('#my-table').DataTable();
        });
      }
    }
  })

Answer 2

我将DataTable（）调用放在函数包装器中并且它有效。我认为超时没有被调用，并且正在调用超时内的函数。我试图指定SELECT id, name, (SELECT count(*) FROM alunno WHERE id_classe = classe.id ) AS count FROM classe WHERE id = :1;没有括号，但有一个角度错误，所以这是我的解决方案。

虽然遇到了另一个问题......每当表第一次填充后更新表时，元素都不会改变。

$(...).DataTable

使用Datatable与Angularjs时出错

2 个答案: