Beginner using Angular and DataTables Buttons

Beginner using Angular and DataTables Buttons

randrewsrandrews Posts: 5Questions: 3Answers: 0

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?

Answers

  • kthorngrenkthorngren Posts: 14,099Questions: 25Answers: 3,325

    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

  • randrewsrandrews Posts: 5Questions: 3Answers: 0

    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?

This discussion has been closed.