Beginner using Angular and DataTables Buttons

randrews

I'm a beginner with datatables and trying to use it with angular. The table is working fine but I am struggling to add the export buttons I require.

Here is the html:

<link href="././css/generalStylesheet.css" rel="stylesheet" type="text/css">
<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/1.10.16/css/jquery.dataTables.min.css"/>
<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/buttons/1.4.1/css/buttons.dataTables.min.css"/>
<script type="text/javascript" src="https://cdn.datatables.net/1.10.16/js/jquery.dataTables.min.js"></script>
<script type="text/javascript" src="https://cdn.datatables.net/buttons/1.4.1/js/dataTables.buttons.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jszip/3.1.3/jszip.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/pdfmake/0.1.32/pdfmake.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/pdfmake/0.1.32/vfs_fonts.js"></script>
<script type="text/javascript" src="https://cdn.datatables.net/buttons/1.4.1/js/buttons.html5.min.js"></script>
<script type="text/javascript" src="https://cdn.datatables.net/buttons/1.4.1/js/buttons.print.min.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 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%>
                <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>
   

Here is the angular/javascript:

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({
            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);

    }]);
});

Any guidance why its not displaying and what I'm doing wrong?

kthorngren

You might need to change from this:

('#allUsers').dataTable(

to this:

('#allUsers').DataTable(

Notice the upper case D in DataTable. Please see the first FAQ here:
https://datatables.net/faqs/index#Most-common-FAQs

Kevin

randrews

Thanks Kevin, unfortunately this didn't solve the issue.

Just to note, there are no error when the controller is loaded but the buttons are not showing?