javascript – Angular商店数据和重新加载数据表

前端之家收集整理的这篇文章主要介绍了javascript – Angular商店数据和重新加载数据表前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。
我正在使用
数据表: https://l-lin.github.io/angular-datatables
和bootstrap: https://angular-ui.github.io/bootstrap/

这就是我尝试实现的目标:在使用来自bootstrap的模态添加数据并保存之后,数据表将重新加载(无需重新加载当前路由).

这是我的modalCtrl:

.controller('addModalCtrl',['$scope','$modalInstance','$http','AdminMenu','ResultService',function ($scope,$modalInstance,$http,AdminMenu,ResultService) {

    $scope.cancel = function () {
        $modalInstance.dismiss('cancel');
    };

    $scope.menu = {};

    $scope.doSubmit = function () {
        var data = {
            name: $scope.menu.title,icon: $scope.menu.icon
        };

        AdminMenu.save(data,function (response) {
            $scope.menu = {};
            ResultService(response);
            $modalInstance.dismiss('cancel');
        },function (response) {
            ResultService(response.data);
        })
    };
}])

这是我的数据表功能

function AdminMenuTableData($compile,$scope,$modal,DTOptionsBuilder,DTColumnBuilder,SweetAlert,ResultService,APIROOT) {

$scope.dtOptions = DTOptionsBuilder.fromSource(APIROOT + 'admin-menus')
    .withOption('order',[0,"asc"])
    .withOption('createdRow',function (row,data,dataIndex) {
        // Recompiling so we can bind Angular directive to the DT
        $compile(angular.element(row).contents())($scope);
    });

$scope.dtColumns = [
    DTColumnBuilder.newColumn('id','ID').withOption('searchable',false),DTColumnBuilder.newColumn('name','Name'),DTColumnBuilder.newColumn('','Actions').renderWith(function (data,type,full,Meta) {
        return '<a class="btn btn-default btn-xs" ng-click=edit(' + full.id + ')><i class="fa fa-pencil"></i></a> ' +
            '<a class="btn btn-danger btn-xs" ng-click=delete(' + full.id + ')><i class="fa fa-trash"></i></a>';
    }).notSortable()
];

$scope.dtInstance = {};

function reloadData()
{
    $scope.dtInstance.reloadData();
}

}

我如何调用reloadData()函数,以便我可以刷新数据表.我试图注入AdminenuTableData函数,但没有运气.注射器失败.

有什么建议吗?

解决方法

请改用 rerender().它破坏了表并重新初始化它,包括重新加载AJAX源:
$scope.reloadData = function() {
   $scope.dtInstance.rerender(); 
}

演示 – > http://plnkr.co/edit/HbMDcMne3OiH2KYbJ8Iv?p=preview

原文链接:https://www.f2er.com/js/154742.html

猜你在找的JavaScript相关文章