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...


<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>
<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">
            <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";
                    <th>Last Login</th>


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 = [{}];
            dom: 'Bfrtip',
            buttons: [
        customerportalService.allUsers().then(function(allUsersData) {
            _.each(allUsersData, function(singObj){


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


  • kthorngrenkthorngren Posts: 20,576Questions: 26Answers: 4,823

    I suspect the problem is with this:

    I believe if you change to this it may work better:

    Note the D in DataTable. please see this FAQ:


  • allanallan Posts: 62,235Questions: 1Answers: 10,209 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.


  • 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: 62,235Questions: 1Answers: 10,209 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.


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

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

  • allanallan Posts: 62,235Questions: 1Answers: 10,209 Site admin

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


This discussion has been closed.