0

I am trying to use angular datatables optionbuilder to create button for excel sheet download. But I am getting error withButton is not a function. I have downloaded all this files and have included in my main html page. In HTML

 <script src="/lib/angular-datatables.min.js"></script>
    <script src="/lib/js_button/dataTables.buttons.min.js"></script>
        <script src="/lib/js_button/buttons.flash.min.js"></script>
        <script src="/lib/js_button/jszip.min.js"></script>
          <script src="/lib/js_button/pdfmake.min.js"></script>
          <script src="/lib/js_button/vfs_fonts.js"></script>
          <script src="/lib/js_button/buttons.html5.min.js"></script>
          <script src="/lib/js_button/buttons.print.min.js"></script>
          <script src="/lib/angular-datatables.min.js"></script>
            <link rel="stylesheet" type="text/css" href="/lib/js_button/buttons.dataTables.min.css">

In controller 

        var app = angular.module('myApp', ['Alertify','ngRoute', 'datatables']);
            app.controller('MainCtrl', function($scope, $http, $location, 
               DTOptionsBuilder, DTColumnBuilder,Alertify) {..
             $scope.vm.dtOptions = DTOptionsBuilder.newOptions()
                .withOption('order', [])
                .withOption('bFilter', false)
                .withOption('bSort', false)
                .withOption('bAutoWidth',true)
               .withOption('sScrollY' , "200")
               .withOption('sScrollX' , "100%")
               .withOption('bScrollCollapse' , true)
                .withPaginationType('full_numbers')
                .withOption('lengthMenu', [5, 10, 25, 50, 100, 150, 200])
                .withDOM('lrtip')
                .withButtons([
             {
                    extend: "excelHtml5",
                    filename: "MailItemList",
                    text: "<i class='fa fa-file-excel-o'></i>  Excel",
                    title: "Mail Item List",
                    exportOptions: {
                        columns:[2,3,4,5,6,7,8.9,10,11,12,13,14,15,16,17,18,19,20,21,22]
                    },
                    exportData: { decodeEntities: true }
             }
              ]);
        ..}

In Html

<table id="table1" class="table  table-bordered table-hover fixed" datatable="ng"  dt-columns="vm.dtColumns" dt-options="vm.dtOptions" >
        <thead id="theadstyle">

         <tr>

             <th class="alignstyle"> </th>
                <th class="alignstyle">1</th>
                <th class="alignstyle">2</th>
                <th class="alignstyle">3 </th>
                <th class="alignstyle">4 </th>
                <th class="alignstyle">5 </th>
                <th class="alignstyle">6</th>
                <th class="alignstyle">7 </th>
                <th class="alignstyle">8</th>
            </tr>
        </thead>
        <tbody >

            <tr ng-repeat="build in buildmodel1">

                <td> {{build.1}} </td>
                <td> {{build.2}} </td>
                <td> {{build.3}} </td>
                <td> {{build.4}} </td>
                <td> {{build.5}} </td>
                <td> {{build.6}} </td>
                <td> {{build.7}} </td>
               <td> {{build.8}} </td>

            </tr>
        </tbody>
    </table>

Can someone explain me what else needs to be added to this piece of code.

Janani sridhar
  • 23
  • 3
  • 10
  • Add `B` to `dom`, i.e `.withDOM('Blrtip')` ... – davidkonrad May 15 '17 at 09:35
  • Hi, I tried changing . But still I am getting the error DTOptionsBuilder.newOptions(...).withOption(...).withOption(...).withOption(...).withOption(...).withOption(...).withOption(...).withOption(...).withPaginationType(...).withOption(...).withDOM(...).withButtons is not a function – Janani sridhar May 15 '17 at 11:09
  • Tsk, I've missed you got an error, thought buttons just didnt show up – davidkonrad May 15 '17 at 11:23
  • Hi Adding only the Blrtip worked. :) I removed .withButtons option. I am able to see the buttons now. But what if I want only the excel button to be present. – Janani sridhar May 15 '17 at 11:35

1 Answers1

-1

Adding B to dom, i.e .withDOM('Blrtip') will show buttons.

Error "withButtons is not a function" is because the js file dataTables.buttons.min.js is missing or , if you are in angular the module datatable.buttons is not defined angular.module('app.components', [ ...,'datatables.buttons'] Any remarks?

Costel-Irinel Viziteu
  • 46
  • 5