asp.net mvc angular jquery表无法正常工作

Question

我是asp.net mvc的新手,我无法添加加载jquery table.Jquery Datatable显示表中没有数据,下面是我的代码

我的控制器

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的事情.

可能正在发生的事情是DOM在$('#TblID').DataTable()被调用时没有使用渲染表数据进行刷新.因此,当DataTables开始渲染时,某些信息不可用.如果这是正确的,那么一个hacky解决方案就是调用DataTable()一个setTimeout():

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);
  }
  /* ... */
}