如何通过导出按钮使用angular js数据表

时间:2018-07-03 06:04:09

标签: angularjs

dataTables.buttons.min.js:5 Uncaught TypeError: Cannot read property 'ext' of undefined
at dataTables.buttons.min.js:5
at dataTables.buttons.min.js:5
at dataTables.buttons.min.js:5

如果我尝试将按钮扩展名CDN放置在有角度的Js中,则会出现此类错误,请帮我解决问题。

1 个答案:

答案 0 :(得分:0)

添加数据表依赖项

<!-- Datatables -->
<link href="path to/datatables.min.css" rel="stylesheet">
<script src="path to/datatables.min.js"></script>

<!-- Datatables Buttons -->
<script src="path to/dataTables.buttons.min.js"></script>

<!-- Angular Datatables -->
<script src="path to/angular-datatables.min.js"></script>
<script src="path to/angular-datatables.buttons.min.js"></script>

在模块中包含角度数据表

angular
    .module('app', [            
        'datatables',
        'datatables.buttons'
    ])

注入DTOptionsBuilder并在控制器中定义选项

angular
    .module('app')
    .controller('MyController', function MyController($scope, DTOptionsBuilder) {
        $scope.dtOptions = DTOptionsBuilder.newOptions()
            .withButtons([
                'copy',
                'pdf',
                'excel'
            ])
            .withDOM('<"html5buttons"B>lTtipr');
    });

在表上声明数据表和dt-options指令

<table datatable="ng" dt-options="dtOptions" class="table table-striped table-bordered"></table>

Angular Datatables文档:http://l-lin.github.io/angular-datatables/archives/#!/withButtons