AngularJS中如何在DOM外部触发angular datatables（l-lin）的button().trigger()

嘿，我来帮你搞定这个问题！你已经正确配置了dtInstance，这可是实现外部触发的关键——它会在表格初始化完成后，持有DataTables的原生API引用。下面分两种常见场景给你详细说明：

1. 点击自定义外部按钮触发（比如页面上的独立导出按钮） #

假设你想在DataTables自带的按钮栏之外，加一个自定义按钮来触发Excel导出，操作很简单：

第一步：在HTML里加个触发按钮 #

<!-- 这个按钮不在DataTables的按钮组里，完全是自定义的 -->
<button class="btn btn-primary" ng-click="manualExport()">点击手动导出Excel</button>

<!-- 你的DataTables表格 -->
<table datatable="ng" dt-options="dtOptions" dt-column-defs="dtColumns" dt-instance="dtInstance" class="row-border hover"> </table>

第二步：在控制器里写触发逻辑 #

$scope.manualExport = function() {
  // 先判断表格实例是否已经初始化完成，避免报错
  if ($scope.dtInstance && $scope.dtInstance.DataTable) {
    // 两种方式定位到你的Excel按钮，推荐第二种更可靠
    // 方式1：通过按钮的顺序索引（比如它是你配置的第一个按钮，索引从0开始）
    // $scope.dtInstance.DataTable.button(0).trigger();
    
    // 方式2：通过按钮的CSS类定位（你给Excel按钮加了buttons-excel类，这个不会因为按钮顺序变化失效）
    $scope.dtInstance.DataTable.button('.buttons-excel').trigger();
  }
};

2. 表格初始化完成后自动触发（比如页面加载完自动导出） #

如果想在表格渲染完成后自动执行导出，或者在某个异步请求完成后触发，记得监听dtInstance的onInit回调，确保表格已经准备好：

// 初始化dtInstance时加上onInit回调
$scope.dtInstance = {
  onInit: function(dtInstance) {
    console.log('表格已经初始化完成啦！');
    // 这里直接触发导出按钮
    dtInstance.DataTable.button('.buttons-excel').trigger();
  }
};

// 你的dtOptions配置不变
$scope.dtOptions = DTOptionsBuilder.newOptions()
  .withDOM('frtip')
  .withButtons([{
    extend: "excelHtml5",
    className: 'btn btn-success buttons-excel',
    filename: "List",
    title: "List",
    text: "Export",
    exportOptions: {
      columns: ':visible' // 补全你原来的配置内容
    }
  }]);

几个关键注意事项 #

• 一定要等表格初始化完成：如果在表格还没渲染好的时候调用trigger()，肯定会报错找不到实例，所以要么加判断，要么用onInit回调。
• 优先用CSS类定位按钮：用索引的话，后续如果调整按钮顺序，代码就失效了，而你已经给Excel按钮加了buttons-excel类，用这个选择器稳得很。
• 确保dtInstance是绑定在$scope上的：你已经在控制器里定义了$scope.dtInstance = {}，这部分没问题，Angular DataTables会自动把实例注入进去。

这样不管是点击外部按钮，还是在其他业务逻辑里调用$scope.manualExport()，都能完美触发DataTables的导出操作啦！

内容的提问来源于stack exchange，提问作者Ron