我正在尝试在一侧加载所有 js脚本和 requirejs ,而在另一方面,我想使用 Jquery Datatables 在 angular SPA 及其插件中,但没有任何效果。这是一个依赖问题还是其他问题?
**dataTables.buttons.min.js:5 Uncaught TypeError: Cannot read property 'buttons' of undefined(…)**
请帮助
var baseURL=window.location.protocol+"//"+window.location.host+"/Aide/public/vendors/js";
console.log(baseURL)
require.config({
//baseUrl:"localhost/Aide/public/vendors/js",
baseUrl:baseURL,
//waitSeconds: 2,
paths:{
'jquery':'jquery.min',
'bootstrap':'bootstrap.min',
'moment':'plugins/moment.min',
'fullcalendar':'plugins/fullcalendar.min',
'nicescroll':'plugins/jquery.nicescroll',
'angular':'require/angular',
'app':'require/app',
'coreModule':'require/coreModule',
'sanitize':'require/lib/angular-sanitize.min',
'ui.router':'require/lib/angular-ui-router.min',
'cfpLoadingBar':"require/lib/loading-bar.min",
'ngMaterial':"angular-material.min",
'ngMaterial_aria':"angular-aria.min",
'ngAnimate':"angular-animate.min",
//'ang-datatables':"../../vendor/datatables/dist/angular-datatables.min",
'datatables.net':'../datatables/media/js/jquery.dataTables.min',
'datatables.net-bs':'../datatables/media/js/dataTables.bootstrap.min',
'datatables.net-buttons':'../datatables/extensions/Buttons/js/dataTables.buttons.min',
'buttons.colVis':'../datatables/extensions/Buttons/js/buttons.colVis.min',
'buttons.bootstrap':'../datatables/extensions/Buttons/js/buttons.bootstrap.min',
'datatables.net-responsive':'../datatables/extensions/Responsive/js/dataTables.responsive.min',
'responsive.bootstrap':'../datatables/extensions/Responsive/js/responsive.bootstrap.min',
'dataTables.colReorder':'../datatables/extensions/ColReorder/js/dataTables.colReorder.min',
'dataTables.select':'../datatables/extensions/Select/js/dataTables.select.min',
'personal':'personal',
},
shim:{
'jquery': {'exports':'$'},
'bootstrap': {'deps': ['jquery'],'exports' : 'Bootstrap'},
'angular': {'exports': 'angular','deps': ['jquery']},
//'ang-datatables': {'exports': 'angular'},
'datatables.net': {'deps': ['jquery','bootstrap']},
'datatables.net-bs': {'deps': ['jquery','datatables.net']},
'datatables.net-buttons': {'deps': ['datatables.net']},
'buttons.colVis': {'deps': ['jquery','datatables.net','datatables.net-buttons']},
'buttons.bootstrap': {'deps': ['jquery','datatables.net-bs','datatables.net-buttons']},
'datatables.net-responsive': {'deps':['jquery','datatables.net','bootstrap']},
'responsive.bootstrap': {'deps': ['jquery','datatables.net-bs','datatables.net-responsive']},
'dataTables.colReorder': {'deps': ['jquery','datatables.net']},
'dataTables.select': {'deps': ['jquery','datatables.net']},
'moment': {'deps': ['jquery']},
'fullcalendar': {'deps': ['jquery']},
'nicescroll': {'deps': ['jquery']},
'personal': {'deps': ['jquery','bootstrap','moment']},
'app':{
'deps':['angular','coreModule','ui.router','sanitize','cfpLoadingBar',
'ngMaterial','ngMaterial_aria','ngAnimate',
'datatables.net']
},
'ui.router': {'deps': ['angular']},
'sanitize': {'deps': ['angular']},
'cfpLoadingBar': {'deps': ['angular']},
'ngMaterial':{'deps':['angular']},
'coreModule':{'deps':['angular','ui.router']},
'ngMaterial_aria':{'deps':['angular']},
'ngAnimate':{'deps':['angular']},
}
});
require(["jquery","bootstrap",'datatables.net',"nicescroll","fullcalendar","moment",
"personal","datatables.net-bs","datatables.net-buttons",'datatables.net-responsive',
"buttons.colVis","buttons.bootstrap",
"responsive.bootstrap","dataTables.colReorder","dataTables.select"]
, function($) {
console.log($.fn);
});
require(['angular','app'],function(angular){
angular.bootstrap(document,['app']);
});
现在在角度控制器中:
define(['app'],function (app) {
app.controller("application_homeController",['$scope','$state','$window','$http',
function($scope,$state,$window,$http){
require( ['jquery','datatables.net','bootstrap','dataTables_bootstrap',
'dataTables.buttons'], function($) {
$scope.oLanguageOptions={
"sSearch": "<i class='fa fa-filter'></i>Filtre : "
};
$scope.selectOptions= {
style:'multi',//'os',
selector: 'td:nth-child(1),td:nth-child(2)'//'td:first-child'
};
var wrapperHeight = $('.wrapper').height();
var dt=$('#table').DataTable({
processing: true,
//serverSide: true,
dom: 'Bfrtip',
bInfo:false,
bAutoWidth: true,
responsive: true,
colReorder: true,
"fnInitComplete": function() {
//dt.fnAdjustColumnSizing();
},
//scrollY: wrapperHeight,
//scrollX: true,
//scrollCollapse: true,
oLanguage:$scope.oLanguageOptions,
pageLength:1,
ajax: $scope.baseURL+"/test",
columns: [
{"mRender": function (data, type, full, meta){return full.id_user;},
width:'150px'
},
{"mRender": function (data, type, full, meta){return full.name;},
width:'150px'
},
{"mRender": function (data, type, full, meta){return full.created_at;},
width:'650px'
},
]
});
$('.dataTables_filter input[type="search"]').css({height:"18px"});
} );
}//main fx
]);
})