Angular + RequireJS + jqueryDatatables

时间:2016-12-05 14:14:31

标签: jquery angularjs datatables requirejs

我正在尝试在一侧加载所有 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
]);

})

enter image description here

0 个答案:

没有答案