Angular 6 Datatables为按钮添加点击事件

Posted 2023-05-07

【中文标题】Angular 6 Datatables为按钮添加点击事件

【英文标题】：Angular 6 Datatables Add click event for button

【发布时间】：2019-03-18 17:43:00

【问题描述】：

所以，我似乎无法在任何地方找到答案。

我试图使用this 效果很好的“服务器方式”，直到您发现限制。就像“选择”插件不起作用，或者你不能使用“扩展”表

所以，我需要回到本机使用 Datatable。

假设我这样定义我的表

this.dtOptions = 
  ajax: (dataTablesParameters: any, callback: any) => 
    this.myService.myEndPoint(dataTablesParameters).
    subscribe((resp: any) => 
      this.attributes = resp.aaData;

      callback(
        recordsTotal: resp.iTotalRecords,
        recordsFiltered: resp.iTotalDisplayRecords,
        data: resp.aaData
      );
    );
  ,
  select: true,
  order: [2, "asc"],
  columns: [
      data: null,
      defaultContent: 'details',
      orderable: false,
      class: 'details-control'
    ,
    
      data: null,
      orderable: false,
    ,
    
      data: "skuPartNumber",
      orderable: true,
    ,
    
      data: "activeUnits",
      orderable: true
    ,
    // data: "consumedUnits", orderable: true 
    
      title: "Display Name",
      data: null,
      orderable: true,
      render: (data, type, full) => `<button (click)="testClick(data.id)">sdfsdf</button>`
    
  ]
;

如何监听按钮事件？我的假设是在 AJAX 和数据表完成之前呈现（编译）页面？

我可以在 knockoutJS 和 durandal 中做到这一点，但在 Angular 中无法解决

【问题讨论】：

您能详细说明一下吗？

我在 Angular 处理页面后添加 html（带有按钮和点击事件）。如何让事件触发？一定是个办法，就是不知道怎么弄

我应该更清楚.. 我需要重新绑定（不确定术语）Angular。我需要在“Angular”上下文中，所以我可以将数据从行传递到函数中。就像一个 id 或其他东西。

【参考方案1】：

如果您使用服务器端渲染，您可以在drawCallback (docs) 上定义您的点击事件

this.dtOptions = 
    ...
    "drawCallback": ()=>
        //define your listeners here
    
    ...

【讨论】：

“在这里定义你的听众”到底是什么样的？那是我不知道的。

为您的按钮定义事件监听器。类似document.getElementById('idOfButton').addEventListener('click',testClick(5))

【参考方案2】：

您可以在drawCallback 中捕获事件。

let table = $('#example').DataTable(
      drawCallback: () => 
        $('.buttonClass').on('click', () =>   //click event on button with class `buttonClass`
            this.nextButtonClickEvent();
          );
      
    );

参考这个有表格分页的demo https://stackblitz.com/edit/angular-datatables-pagination

【讨论】：

我应该更清楚.. 我需要重新绑定（不确定术语）Angular。我需要在“Angular”上下文中，所以我可以将数据从行传递到函数中。就像一个 id 或其他东西。