Question

从数据库中删除记录后，我似乎无法重新绘制Angular-Datatable的重绘方式。我没有收到任何错误，但除非我手动刷新页面，否则表格似乎永远不会重绘。我一直在尝试使用网站文档中的许多示例。

我有我的数据表：

            $scope.dtInstance = {};
            $scope.selectedItems = [];
            $scope.toggleItem = toggleItem;
            $scope.reloadData = reloadData;

            // Build the User table
            $scope.dtOptions = DTOptionsBuilder
                .fromFnPromise(function() {
                    var deferred = $q.defer();
                    deferred.resolve(users); 
                    return deferred.promise;
                })
                .withBootstrap() // Style with Bootstrap
                .withOption('responsive', true) 
                .withDisplayLength(15) // Show 15 items initially
                .withOption('order', [0, 'asc']) // Sort by the first column
                .withOption('lengthMenu', [15, 50, 100]) // Set the length menu items
                .withOption('createdRow', function(row, data, dataIndex) {
                    // Recompiling so we can bind Angular directive to the DT
                    $compile(angular.element(row).contents())($scope);
                })
                .withOption('headerCallback', function(header) {
                    if (!$scope.headerCompiled) {
                        // Use this headerCompiled field to only compile header once
                        $scope.headerCompiled = true;
                        $compile(angular.element(header).contents())($scope);
                    }
                })              
                .withOption('fnRowCallback', formatCell);
            $scope.dtColumns = [
                DTColumnBuilder.newColumn(null).withTitle('Username').withClass('col-md-2').renderWith(createUsernameHyperlink), 
                DTColumnBuilder.newColumn('Email').withTitle('Email'), 
                DTColumnBuilder.newColumn('Level').withTitle('Role').withClass('col-md-2'),
                DTColumnBuilder.newColumn('LastConnected').withTitle('Last Accessed'), 
                DTColumnBuilder.newColumn('Verified').withTitle('Account Verified').withClass('col-md-2'), 
                DTColumnBuilder.newColumn(null).withTitle('')
                    .notSortable()
                    .renderWith(function(data, type, full, meta) {
                        return '<input type="checkbox" ng-click="toggleItem(' + data.Id + ')" />';
                    }).withClass("text-center")     
            ];

        // Reload the datatable
        function reloadData() {

            var resetPaging = false;
            $scope.dtInstance.reloadData(callback, resetPaging);

        };  

        function callback(json) {
            console.log(json);
        };

然后我的删除功能位于同一个控制器中。从服务成功响应时调用reloadData()。我可以从console.log中看到它正在正确调用函数，但没有任何反应。

$scope.deleteUser = function( selectedItems ) {

            swal({
                title: 'Are you sure?', 
                text: 'Are you sure you want to delete the selected account profile(s)? This process cannot be undone...', 
                type: 'warning', 
                showCancelButton: true, 
                confirmButtonText: 'Delete', 
                confirmButtonColor: "#DD6B55", 
                closeOnConfirm: false, 
                allowEscapeKey: true, 
                showLoaderOnConfirm: true
            }, function() {

                setTimeout( function() {

                    // Delete user
                    UsersService.deleteUser( selectedItems.toString() )
                        .then(function( data ) {
                            // Show a success modal
                            swal({
                                title: 'Success', 
                                text: 'User has been deleted!', 
                                type: 'success', 
                                confirmButtonText: 'Close', 
                                allowEscapeKey: false
                            }, function() {

                                reloadData(); //<== Calls the function but doesn't do anything
                                //$state.go('users');

                            });
                        }, function() {
                            // Show an error modal
                            swal({
                                title: 'Oops', 
                                text: 'Something went wrong!', 
                                type: 'error', 
                                confirmButtonText: 'Close', 
                                allowEscapeKey: true
                            });
                        }); 

                }, 1000);   

            });

        };

只是想知道我是否错过了一些步骤？

Answer 1

正如@davidkonrad在之前的评论中提到的那样，以及Angular-Datatable的作者更多，我试图重绘我的表时没有重新加载我的内容。即使我从注入的服务引用我的数据（// Build the User table $scope.dtOptions = DTOptionsBuilder .fromFnPromise(function() { var deferred = $q.defer(); deferred.resolve(users); return deferred.promise; }) .withBootstrap() // Style with Bootstrap），它也永远不会在控制器中更新，因此我的表内容永远不会有所不同。

作者建议最好从发出HTTP请求的promise中加载数据，这样每次重绘表时都允许进一步调用promise。

所以不要这样：

// Build the User table
            $scope.dtOptions = DTOptionsBuilder
                .fromFnPromise(function() {
                    return UsersService.getUsers();
                })
                .withBootstrap() // Style with Bootstrap

我把它更改为：

$scope.dtInstance.reloadData();

现在通过调用{{1}}

，在每次重绘活动时都可以更新我的表格

我的Github帖子可以找到here

Answer 2

setTimeout函数在角度摘要周期之外工作，因为它是异步的。如果您希望在超时时间内执行操作以应用角度摘要周期，则应使用$timeout代替。

另一种选择是使用$scope.apply()，但这只会模仿$timeout函数。

请注意，您需要向控制器注入$timeout。

在从数据库中删除记录后，无法研究如何重新加载角度数据表

2 个答案: