jquery - asp.net mvc Angular jquery 表不工作

Question

我是 Angular 的 ASP.NET MVC 新手，无法添加加载 jquery 表。Jquery 数据表显示表中没有可用数据，下面是我的代码

我的 Controller

app.controller('SpaceController', function ($scope, SpaceService) {

    $scope.getAll = function () {

        loader(true);
        var getData = SpaceService.getAllData();
        getData.then(function (response) {

            if (response.data.success) {
                $scope.listdt = response.data.data;
                $('#TblID').DataTable();
                $scope.populateStatus();
                loader(false);

            }
            else {
                errorAlert("Oops", response.data.message);
                loader(false);
            }
        });
    }
})

我的服务

app.service("SpaceService", function ($http) {


        this.getAllData = function () {
            var response = $http({
                method: "GET",
                url: "/Space/getAll",
                dataType: "json"
            });
            return response;
        }
});

我的表格 html

<table class="table display" id="TblID">
    <thead>
        <tr>
            <th>ID</th>
            <th>Key</th>
            <th>Name</th>
            <th>Description</th>
            <th>Status</th>
            <th>Action</th>
        </tr>
    </thead>

    <tbody>

        <tr ng-repeat="d in listdt">
            <td>{{d.SpaceID}}</td>
            <td>{{d.SpaceKey}}</td>
            <td>{{d.SpaceName}}</td>
            <td>{{d.SpaceDesc}}</td>
            <td> <span
                    class="label label-table {{d.StatusKey == 'A' ? 'label-success' : 'label-red'}}">{{d.StatusName}}</span>
            </td>
            <td>
                <a class="btn btn-primary btn-sm" ng-click="edit(d)"><i class="fa fa-pencil fa-lg"></i></a>
                <a class="btn btn-danger btn-sm" ng-click="delete(d)"><i class="fa fa-trash fa-lg"></i></a>
            </td>
        </tr>

    </tbody>
</table>

我无法找到为什么它显示无数据，当我尝试从表中搜索某些内容时，所有行都隐藏并开始显示表中没有可用数据。下面是屏幕截图。

Answer 1

混合框架是一个众所周知的坏主意。您正在使用 jquery 插件来呈现由 AngularJs 生成的表。我确信有一些优秀的 AngularJs 组件可以执行类似于 DataTables 的操作。

可能发生的情况是，当调用 $('#TblID').DataTable() 时，DOM 尚未使用渲染的表数据刷新。因此，当 DataTables 开始呈现时，某些信息不可用。如果这是正确的，一个黑客解决方案是在 setTimeout() 内部调用 DataTable():

getData.then(function (response) {
  if (response.data.success) {
     $scope.listdt = response.data.data;
     $scope.populateStatus();
     $timeout(function() {
        $('#TblID').DataTable();
     })
     loader(false);
  }
  /* ... */
}

如果这不能解决您的问题，那么我建议不要让 Angular 渲染表格并将响应直接传递给 DataTable 函数。

getData.then(function (response) {
  if (response.data.success) {
     $scope.listdt = response.data.data;
     $scope.populateStatus();
     $('#TblID').DataTable({
       data: response.data.data,
       columns: [
         { data: 'SpaceID', name: 'ID' },
         { data: 'SpaceKey', name: 'Key' },
         { data: 'SpaceName', name: 'Name' },
         { data: 'SpaceDesc', name: 'Description' },
         { data: 'StatusName', name: 'Status' } /* use more advanced options for style */
       ],
       buttons: [ 
         { tag: 'edit', className: 'fa fa-pencil fa-lg', action: (e, b) => $scope.edit(b.row().data()) },
         { tag: 'delete', className: 'fa fa-trash fa-lg', action: (e, b) => $scope.delete(b.row().data()) }
       ]
     });

     loader(false);
  }
  /* ... */
}