如何在DataTables Angular 5的下一個/上一個分頁按鈕上捕獲單擊事件

Question

不幸的是，如何在角度5的上一個/下一個分頁按鈕中捕獲單擊事件，不幸的是我在jquery中獲得了代碼。

jQuery代碼：

var table = $('#example').DataTable({
 drawCallback: function(){
  $('.paginate_button.next', this.api().table().container())          
  .on('click', function(){
  alert('next');
 });       
 }
}); 

#stack溢出鏈接

#jsFiddle鏈接

但是我需要角度數據表。 如果有示例，如何捕獲上一個/下一個單擊事件。

按鈕行單擊事件

 buttonInRowClick(event: any): void {
    event.stopPropagation();
    console.log('Button in the row clicked.');
  }

全行點擊事件

wholeRowClick(): void {
    console.log('Whole row clicked.');
  }

預期下一個/上一個按鈕單擊事件

nextButtonClickEvent():void {
   //do next particular records like  101 - 200 rows.
   //we are calling to api
}
previousButtonClickEvent():void {
  //do previous particular the records like  0 - 100 rows.
   //we are calling to API
}

因為我的后端有成千上萬的記錄。

Answer 1

我建議使用ngx-datatable庫，非常完整且易於使用！ 連文檔都很好！ https://github.com/swimlane/ngx-datatable

Answer 2

解決方案是通過在on（）調用中為目標元素提供選擇器作為第二個參數來使用事件委托，請參見下面的示例。 根據jQuery on（）文檔

Answer 3

您需要提供有關要綁定功能的元素的Angular組件的引用

<div #mytable></div>

在您的組件中添加帶有ViewChild的元素引用

@ViewChild('mytable') tableRef: ElementRef;

然后，使用該元素引用來綁定所需的功能，並使其可以按角度訪問

ngAfterViewInit(): void {
  this.table = $(this.tableRef.nativeElement).DataTable({
      drawCallback: function () {
        $('.paginate_button.next', this.api().table().container()).on('click', () =>  {
          // your angular method here
          this.nextButtonClickEvent();
        });
      }
  });
}

只需測試您的范圍。 通過使用箭頭函數，您可以訪問類中編寫的方法，而該方法可以解決問題

Answer 4

您可以在組件內部使用任何jquery代碼，並使用arrow函數維護this引用

零件

declare let $: any;
@Component({
  selector: 'my-app',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {


  ngOnInit() {
    let table = $('#example').DataTable({
      drawCallback: () => {
        $('.paginate_button.next')
          .on('click', () => {
            this.nextButtonClickEvent();
          });
      }
    });
  }

  nextButtonClickEvent(): void {
       console.log('next clicked');
  }

}

stackblitz演示