如何在 AngularJS 中的 angular 数据表 (l-lin) 上的 DOM 之外应用 button().trigger()

Question

我用 dtInstance 创建了一个 table，如下所示：

   <table datatable="ng" dt-options="dtOptions" dt-column-defs="dtColumns" dt-instance="dtInstance" class="row-border hover">
   </table>

在控制器中我定义了 dtOptions 和 dtColumns:

 $scope.dtInstance = {};
    $scope.dtOptions = DTOptionsBuilder.newOptions()

    .withDOM('frtip')
    .withButtons([
{
    extend: "excelHtml5",
    className: 'btn btn-success buttons-excel',
    filename: "List",
    title: "List",
    text: "Export",
    exportOptions: {
        columns: ':visible'
    },
    //CharSet: "utf8",
    exportData: { decodeEntities: true }

}

我的问题是我想在 dt 之外创建一个按钮 table 并在 ng-click

时触发 .withButtons 导出按钮

我还想隐藏 table 中生成的 .withButtons。

收到此错误

TypeError: Cannot read property 'button' of undefined

当我使用下面的代码时

<button ng-click="dtInstance.DataTable.button('.buttons-excel').trigger()">Download EXCEL</button>

谢谢

Answer 1

尝试使用 null 而不是 {} 来初始化 dtInstance 变量：

$scope.dtInstance = null;

保持其他一切不变。

更新：检查您是否已导入所有需要的插件。按照我创建的以下示例进行操作以确保：

Plunker example

如何在 AngularJS 中的 angular 数据表 (l-lin) 上的 DOM 之外应用 button().trigger()

How to apply button().trigger() outside DOM on angular datatables (l-lin) in AngularJS

html

javascript

datatable

angularjs

angular-datatables