Buttons not showing/working?

randrews

I've got a working angular DataTables for my registered users but I want to add the buttons to download the table etc.
There are no errors being thrown...

HTML:

<link href="././css/generalStylesheet.css" rel="stylesheet" type="text/css">
<script src="../bower_components/datatables.net-buttons/js/dataTables.buttons.js"></script>
<script src="../bower_components/datatables.net-buttons/js/buttons.colVis.js"></script>
<script src="../bower_components/datatables.net-buttons/js/buttons.flash.js"></script>
<script src="../bower_components/datatables.net-buttons/js/buttons.html5.js"></script>
<script src="../bower_components/datatables.net-buttons/js/buttons.print.js"></script>

<div class="loader dispNone ng-scope">
    <div class="overlay"></div>
    <px-spinner class="x-scope px-spinner-0" style="width:80px; height:80px;">
        <div id="Wrapper" class="spinner style-scope px-spinner" style="width:80px; height:80px;"></div>
    </px-spinner>
</div>
<div ng-if="isManager()" class="displayFlex">
    <div style="flex:1;">
        <div class="tableSpacing">
            <span style="font-size: 20px;font-weight: bolder;">Manager</span>
            <div class="successMsg">
                {{successMessage}}
            </div>
            <table id="allUsers" class="display" width=98%>
                <style scoped>
                    @import "../bower_components/datatables.net-dt/css/jquery.dataTables.css";
                    @import "../css/modal.css";
                    @import "../bower_components/datatables.net-buttons-dt/css/buttons.dataTables.css";
                </style>
                <thead>
                <tr>
                    <th>SSO</th>
                    <th>Name</th>
                    <th>Email</th>
                    <th>Last Login</th>
                    <th>Role</th>
                    <th>Status</th>
                </tr>
                </thead>
                <tbody>
                </tbody>
            </table>   
        </div>
    </div>
</div>

JS:

define(['jquery','angular', '../module', 'datatable'], function (jquery, angular, controllers, datatable) {

    // Controller definition
    controllers.controller('ManagerCtrl', ['customerportalService','$state','$scope','$http','$timeout', function (customerportalService, $state, $scope, $http, $timeout) {
        $scope.successMessage = "";
        $scope.successMessage = "";
        $scope.allUsersDTData = [];
        $scope.createUserObj = [{}];
        //angular.element('#allUsers').dataTable();
        angular.element('#allUsers').dataTable({
            dom: 'Bfrtip',
            buttons: [
                'copyHtml5',
                'excelHtml5',
                'csvHtml5',
                'pdfHtml5'
            ]
        });
        customerportalService.allUsers().then(function(allUsersData) {
            _.each(allUsersData, function(singObj){
                $scope.allUsersDTData.push([
                    singObj.sso,
                    singObj.fullName,
                    singObj.email,
                    singObj.lastLogin,
                    singObj.role,
                    singObj.status
                ]);
            });
            angular.element('#allUsers').dataTable().fnAddData($scope.allUsersDTData);

    }]);
});

Anyone see why the buttons do not work or the mistake I'm making?
Sorry I am a beginner!

kthorngren

I suspect the problem is with this:
angular.element('#allUsers').dataTable(

I believe if you change to this it may work better:
angular.element('#allUsers').DataTable(

Note the D in DataTable. please see this FAQ:
https://datatables.net/faqs/index#Most-common-FAQs

Kevin

allan

Talked with @randrews about this directly and the issue was a scoping problem in the Angular integration. Basically although the Buttons code was being loaded, it was being loaded through a <script> tag, while DataTables and jQuery were being loaded using require(). Doing everything with the module loader resolved that.

There was still a weird issue with multiple initialisations of the same table not causing a warning message which it should, but removing the duplicate initialisations resolved that.

Allan

MinustoZero

Hi Allan,
I have exactly the same issue the buttons are not loading. is there any code samples jsfiddle available to look at it.

We are still in Angular 1.x version

allan

No not currently. If you have a link to your page I can take a look at it and see what might be going wrong.

Allan

rasarmento

I have the same issue in my project. Is there any solution?

allan

Perhaps if you can link to the page showing the issue I can take a look?

Allan