Angular Data Table 使用 .withButtons: 导出到 Excel.看不到按钮

Question

我正在尝试使用角度数据表选项构建器来创建用于Excel工作表下载的按钮。但是我收到错误按钮不是一个函数。我已经下载了所有这些文件，并包含在我的主html页面中。在 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">

在控制器中

        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 }
             }
              ]);
        ..}

在网页中

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

有人可以解释一下还需要向这段代码添加什么吗？

Answer 1

将 B 添加到 dom，即 .withDOM('Blrtip'( 将显示按钮。

错误"withButtons不是一个函数"是因为js文件dataTables.buttons.min.js丢失或，如果你在角度模块datatable.buttons没有定义。angular.module('app.components'， [...，'数据表.按钮']有什么意见吗？