0

从数据库中删除记录后，我似乎无法弄清楚如何重绘 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);   

            });

        };

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

4

2 回答 2

4

正如@davidkonrad 在之前的评论中所建议的那样，Angular-Datatable 的作者更是如此，我在尝试重绘表格时没有重新加载我的内容。即使我users从注入的服务中引用了我的数据（

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

所以代替这个：

// Build the User table
            $scope.dtOptions = DTOptionsBuilder
                .fromFnPromise(function() {
                    var deferred = $q.defer();
                    deferred.resolve(users); 
                    return deferred.promise;
                })
                .withBootstrap() // Style with Bootstrap

我把它改成这样：

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

现在在每次重绘事件时通过调用来更新我的表格$scope.dtInstance.reloadData();

我的 Github 帖子可以在这里找到

于 2016-05-09T04:38:37.843 回答
0

setTimeout函数在角度摘要循环之外工作，因为它是异步的。如果您希望在超时内采取的操作适用于您应该使用的角度摘要周期$timeout。

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

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

于 2016-05-05T11:16:46.063 回答