我正在使用
数据表： https://l-lin.github.io/angular-datatables
和bootstrap： https://angular-ui.github.io/bootstrap/
数据表： 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