Question

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

我一直尝试使用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和数据表完成之前呈现（编译）页面吗？

我能够在剔除JS和durandal中做到这一点，但无法在Angular中解决

Answer 1

您可以看到服务器端呈现为预处理器。最终，客户端获得html / css / js输出。

据我了解，您希望能够单击某处。例如，您希望在表格单元格上有一个click事件。您可以执行以下操作：

      <td>{{ person.id }}</td onClick="doSomething()">

您可以更改css以使其作用于悬停：

.yourClass:hover {
  cursor: pointer;
}

不确定这是否是您想要的

Answer 2

如果使用服务器端呈现，则可以在drawCallback（docs）上定义点击事件

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

Answer 3

您可以在drawCallback中捕获事件。

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

请参阅具有表分页https://stackblitz.com/edit/angular-datatables-pagination的此演示

Angular 6数据表为按钮添加单击事件

3 个答案: