Angular-Datatable Buttons will not render

Question

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

Hyra10 · Accepted Answer · 2017-03-21 21:39:53Z

2

I think you are missing some files which the Angular DataTables documentation doesn't specify

The files you are missing are in this package

datatables.net-buttons-bs

you need to install them using

bower

bower install --save datatables.net-buttons-bs

or npm

npm install datatables.net-buttons-bs

When you install this package there will be 5 files that you should add to your project they are

dataTables.buttons.min.js
buttons.colVis.min.js
buttons.flash.min.js
buttons.html5.min.js
buttons.print.min.js

With this, you should be able to see/use withButtons

answered Mar 21, 2017 at 21:39

Hyra10

5202 gold badges6 silver badges20 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Angular-Datatable Buttons will not render

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related