Question

我正在尝试使用angular datatables optionbuilder来创建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 }
             }
              ]);
        ..}

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

有人可以解释一下我还需要在这段代码中添加什么。

Answer 1

将B添加到dom，即withDOM（'Blrtip'）将显示按钮错误“ withButtons不是函数”是因为缺少js文件dataTables.buttons.min.js或，如果成角度，则未定义模块datatable.buttons angular.module（'app.components'，[ ...，'datatables.buttons']

角度数据表使用.withButtons导出到Excel：无法看到按钮

1 个答案: