Buttons not showing

[mmarsella]

Hey there,

I have followed this example thoroughly and still cannot render any of the buttons on a datatable I am drawing using server-side processing. Here is the code:

          vm.dtOptions = DTOptionsBuilder.newOptions()
                            .withOption('ajax', {
                              type: 'POST',
                              url: /my/api/here,
                              headers: {
                                'Authorization': 'Basic blah12345'
                              },
                              dataSrc: function(resp){

                                var data = resp.data;
                                data.forEach(function(el){
                                 //moment.js              
                                 if(el.process_date){
                                   el.process_date = moment(el.process_date).format("MMM D YYYY, h:mm a");
                                 }else{
                                  el.process_date = "N/A"
                                 }                                 
                                 if(el.event_date){
                                   el.event_date = moment(el.event_date).format("MMM D YYYY, h:mm a");
                                 }else{
                                  el.event_date = "N/A"
                                 }  
                                 //------------------------------------------------------------------------
                                 if(el.description === null || !el.description){
                                   el.description = "N/A";
                                 }  
                                });
                              return data;
                              }
                            })
                            .withDOM('Bfrtip')   // I have tried dif options here from other examples
                            .withDataProp('data')
                            .withOption('serverSide', true)
                            .withOption('processing', true)
                            .withOption('order', [[0, 'desc']])
                            .withPaginationType('full_numbers')
                            .withButtons([
                                        'columnsToggle',
                                        'colvis',
                                        'copy',
                                        'print',
                                        'excel',
                                        {
                                            text: 'Some button',
                                            key: '1',
                                            action: function (e, dt, node, config) {
                                                alert('Button activated');
                                            }
                                        }
                                    ]);

          vm.dtColumns = [
              DTColumnBuilder.newColumn('event_date').withTitle('Event Date'),
              DTColumnBuilder.newColumn('process_date').withTitle('Process Date'),
              DTColumnBuilder.newColumn('reason').withTitle('Reason'),
              DTColumnBuilder.newColumn('description').withTitle('Description'),
              DTColumnBuilder.newColumn('amount').withTitle('Amount')
                .renderWith(function(data, type, full) {
                    return $filter('currency')(data, '$', 2)
                  }),
              DTColumnBuilder.newColumn('balance').withTitle('Balance')
                .renderWith(function(data, type, full) {
                    return $filter('currency')(data, '$', 2)
                  }),
              DTColumnBuilder.newColumn('id').withTitle('Sequence'),
          ];

Here, I resolve dependencies before I move the $state with my table:

      .state('app', {
          url: '/app',
          abstract: true,
          templateUrl: helper.basepath('app.html'),
          resolve: helper.resolveFor( 'moment','datatables', 'datatables.buttons')
      })

This is the HTML I am using to render the table:

<div class="panel panel-default">
   <div class="panel-body">
      <div>
         <table datatable="" dt-options="fundsCtrl.dtOptions" dt-columns="fundsCtrl.dtColumns" dt-instance="fundsCtrl.dtInstance" class="row-border hover row-border hover"></table>
      </div>
   </div>
</div>

I've noticed in the angular-datatables docs example, a css file was include as well:

<link rel="stylesheet" href="vendor/datatables-buttons/css/buttons.dataTables.css">

which I dug up from the datatable docs and included it in my index.html, but didn't help my cause much.

I would greatly appreciate any help! : )

Thanks so much and look forward to hearing back

[morissette]

I am having the same issue but I suppose mine is due to waiting on the table to render.

From console:

angular.min.js:107 TypeError: Cannot read property 'serverSide' of undefined
    at Object.f [as fromOptions] (angular-datatables.min.js:6)
    at angular-datatables.min.js:6
    at angular.min.js:118
    at n.$eval (angular.min.js:132)
    at n.$digest (angular.min.js:129)
    at n.$apply (angular.min.js:133)
    at g (angular.min.js:87)
    at K (angular.min.js:91)
    at XMLHttpRequest.z.onload (angular.min.js:92)

HTML:

        <div ng-show="values">
              <table class="table" datatable="ng" dt-options="dtOptions">
                <thead>
                  <tr>
                    <th>Device</th>
                    <th>Value</th>
                    <th>Timestamp</th>
                  </tr>
                </thead>
                <tbody>
                  <tr ng-repeat="item in values">
                    <td>{{device}}</td>
                    <td>{{item.y}}</td>
                    <td>{{item.x * 1000 | date:'yyyy-MM-dd HH:mm:ss Z'}}</td>
                  </tr>
                </tbody>
              </table>
        </div>

JS:

var app = angular.module('mydhReports', ['datePicker', 'nvd3', 'datatables', 'datatables.buttons']);
..........
        /*
         * Build DataTable with Data
         */
        $scope.dtOptions = DTOptionsBuilder.newOptions()
            .withPaginationType('full_numbers')
            .withButtons([
                'excel',
                'pdf'
            ])
            .withDisplayLength(10);

[morissette]

Tried moving from ng-show to ng-if with no improvement

[morissette]

Now however I'm not getting any errors in the console. Just no buttons showing and the following html added:

<div ng-if="values" class="ng-scope">
              <div id="DataTables_Table_1_wrapper" class="dataTables_wrapper no-footer"><div class="dt-buttons"></div><div class="dataTables_length" id="DataTables_Table_1_length"><label>Show <select name="DataTables_Table_1_length" aria-controls="DataTables_Table_1" class=""><option value="10">10</option><option value="25">25</option><option value="50">50</option><option value="100">100</option></select> entries</label></div><div id="DataTables_Table_1_filter" class="dataTables_filter"><label>Search:<input type="search" class="" placeholder="" aria-controls="DataTables_Table_1"></label></div><table class="table ng-isolate-scope dataTable no-footer" datatable="ng" dt-options="dtOptions" style="display: table;" id="DataTables_Table_1" role="grid" aria-describedby="DataTables_Table_1_info">
                <thead>
                  <tr role="row"><th class="sorting_asc" tabindex="0" aria-controls="DataTables_Table_1" rowspan="1" colspan="1" aria-sort="ascending" aria-label="Device: activate to sort column descending">Device</th><th class="sorting" tabindex="0" aria-controls="DataTables_Table_1" rowspan="1" colspan="1" aria-label="Value: activate to sort column ascending" style="width: 222px;">Value</th><th class="sorting" tabindex="0" aria-controls="DataTables_Table_1" rowspan="1" colspan="1" aria-label="Timestamp: activate to sort column ascending" style="width: 921px;">Timestamp</th></tr>
                </thead>
                <tbody>
                  <!-- ngRepeat: item in values --><!-- end ngRepeat: item in values --><!-- end ngRepeat: item in values --><!-- end ngRepeat: item in values --><!-- end ngRepeat: item in values --><!-- end ngRepeat: item in values --><!-- end ngRepeat: item in values --><!-- end ngRepeat: item in values --><!-- end ngRepeat: item in values --><!-- end ngRepeat: item in values --><!-- end ngRepeat: item in values --><!-- end ngRepeat: item in values --><!-- end ngRepeat: item in values --><!-- end ngRepeat: item in values --><!-- end ngRepeat: item in values --><!-- end ngRepeat: item in values --><!-- end ngRepeat: item in values --><!-- end ngRepeat: item in values --><!-- end ngRepeat: item in values --><!-- end ngRepeat: item in values --><!-- end ngRepeat: item in values --><!-- end ngRepeat: item in values --><!-- end ngRepeat: item in values --><!-- end ngRepeat: item in values --><!-- end ngRepeat: item in values --><!-- end ngRepeat: item in values --><!-- end ngRepeat: item in values --><!-- end ngRepeat: item in values --><!-- end ngRepeat: item in values --><!-- end ngRepeat: item in values --><!-- end ngRepeat: item in values --><!-- end ngRepeat: item in values --><!-- end ngRepeat: item in values --><!-- end ngRepeat: item in values --><!-- end ngRepeat: item in values --><!-- end ngRepeat: item in values --><!-- end ngRepeat: item in values --><!-- end ngRepeat: item in values --><!-- end ngRepeat: item in values --><!-- end ngRepeat: item in values --><!-- end ngRepeat: item in values -->
                <tr ng-repeat="item in values" class="ng-scope odd" role="row">
                    <td class="ng-binding sorting_1">TeamPass</td>
                    <td class="ng-binding">0.02</td>
                    <td class="ng-binding">2016-04-25 19:00:00 -0500</td>
                  </tr><tr ng-repeat="item in values" class="ng-scope even" role="row">
                    <td class="ng-binding sorting_1">TeamPass</td>
                    <td class="ng-binding">0.01</td>
                    <td class="ng-binding">2016-04-25 20:00:00 -0500</td>
                  </tr><tr ng-repeat="item in values" class="ng-scope odd" role="row">
                    <td class="ng-binding sorting_1">TeamPass</td>
                    <td class="ng-binding">0.01</td>
                    <td class="ng-binding">2016-04-25 21:00:00 -0500</td>
                  </tr><tr ng-repeat="item in values" class="ng-scope even" role="row">
                    <td class="ng-binding sorting_1">TeamPass</td>
                    <td class="ng-binding">0.01</td>
                    <td class="ng-binding">2016-04-25 22:00:00 -0500</td>
                  </tr><tr ng-repeat="item in values" class="ng-scope odd" role="row">
                    <td class="ng-binding sorting_1">TeamPass</td>
                    <td class="ng-binding">0.01</td>
                    <td class="ng-binding">2016-04-25 23:00:00 -0500</td>
                  </tr><tr ng-repeat="item in values" class="ng-scope even" role="row">
                    <td class="ng-binding sorting_1">TeamPass</td>
                    <td class="ng-binding">0.01</td>
                    <td class="ng-binding">2016-04-26 00:00:00 -0500</td>
                  </tr><tr ng-repeat="item in values" class="ng-scope odd" role="row">
                    <td class="ng-binding sorting_1">TeamPass</td>
                    <td class="ng-binding">0.01</td>
                    <td class="ng-binding">2016-04-26 01:00:00 -0500</td>
                  </tr><tr ng-repeat="item in values" class="ng-scope even" role="row">
                    <td class="ng-binding sorting_1">TeamPass</td>
                    <td class="ng-binding">0.02</td>
                    <td class="ng-binding">2016-04-26 02:00:00 -0500</td>
                  </tr><tr ng-repeat="item in values" class="ng-scope odd" role="row">
                    <td class="ng-binding sorting_1">TeamPass</td>
                    <td class="ng-binding">0.01</td>
                    <td class="ng-binding">2016-04-26 03:00:00 -0500</td>
                  </tr><tr ng-repeat="item in values" class="ng-scope even" role="row">
                    <td class="ng-binding sorting_1">TeamPass</td>
                    <td class="ng-binding">0.02</td>
                    <td class="ng-binding">2016-04-26 04:00:00 -0500</td>
                  </tr></tbody>
              </table><div class="dataTables_info" id="DataTables_Table_1_info" role="status" aria-live="polite">Showing 1 to 10 of 40 entries</div><div class="dataTables_paginate paging_full_numbers" id="DataTables_Table_1_paginate"><a class="paginate_button first disabled" aria-controls="DataTables_Table_1" data-dt-idx="0" tabindex="0" id="DataTables_Table_1_first">First</a><a class="paginate_button previous disabled" aria-controls="DataTables_Table_1" data-dt-idx="1" tabindex="0" id="DataTables_Table_1_previous">Previous</a><span><a class="paginate_button current" aria-controls="DataTables_Table_1" data-dt-idx="2" tabindex="0">1</a><a class="paginate_button " aria-controls="DataTables_Table_1" data-dt-idx="3" tabindex="0">2</a><a class="paginate_button " aria-controls="DataTables_Table_1" data-dt-idx="4" tabindex="0">3</a><a class="paginate_button " aria-controls="DataTables_Table_1" data-dt-idx="5" tabindex="0">4</a></span><a class="paginate_button next" aria-controls="DataTables_Table_1" data-dt-idx="6" tabindex="0" id="DataTables_Table_1_next">Next</a><a class="paginate_button last" aria-controls="DataTables_Table_1" data-dt-idx="7" tabindex="0" id="DataTables_Table_1_last">Last</a></div></div><h3 class="dt-loading" style="display: none;">Loading...</h3>
            </div>

[morissette]

So I see the <div class="dt-buttons"></div> but its not populating :(

[l-lin]

I think you forgot the dataTables.buttons.js, buttons.colVis.js, ... files.

[madhulikasingh06]

Hi, did anyone found the solution for this ,I am not seeing any available buttons however I can see any custom button I am adding.
Someone please help !!!1