Angular 6 Datatables Добавить событие нажатия кнопки

Question

Итак, я не могу найти ответ где-нибудь об этом.

Я пытался использовать этот "Серверный путь", который прекрасно работает, покаВы узнаете ограничения.Как плагин "select" не работает, или вы не можете использовать "расширяющиеся" таблицы

Итак, мне нужно вернуться к использованию 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 и Дюрандале, но не могу понять это в Angular

Answer 1

Если вы используете рендеринг на стороне сервера, вы можете определить события нажатия на drawCallback ( документы )

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

Answer 2

Вы можете захватить событие в 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

Answer 3

Вы можете видеть рендеринг на стороне сервера как предварительный процессор.В конце концов клиент получает вывод html / css / js.

Из того, что я понимаю, вы хотите иметь возможность щелкнуть куда-нибудь.Например, вы хотите иметь событие click для ячейки таблицы.Вы можете сделать что-то вроде:

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

Вы можете изменить CSS, чтобы действовать при наведении:

.yourClass:hover {
  cursor: pointer;
}

Не уверен, что это то, что вы ищете, хотя