Buttons not showing/working?

Buttons not showing/working?

randrewsrandrews Posts: 5Questions: 3Answers: 0

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!

This question has an accepted answers - jump to answer

Answers

  • kthorngrenkthorngren Posts: 20,141Questions: 26Answers: 4,736

    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

  • allanallan Posts: 61,439Questions: 1Answers: 10,052 Site admin
    Answer ✓

    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

  • MinustoZeroMinustoZero Posts: 2Questions: 1Answers: 0
    edited September 2017

    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

  • allanallan Posts: 61,439Questions: 1Answers: 10,052 Site admin

    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

  • rasarmentorasarmento Posts: 1Questions: 0Answers: 0
    edited October 2017

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

  • allanallan Posts: 61,439Questions: 1Answers: 10,052 Site admin

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

    Allan

This discussion has been closed.