如何在 DataTables Angular 5 的下一个/上一个分页按钮上捕获单击事件

Question

如何在 Angular 5 中捕获上一个/下一个分页按钮中的点击事件。不幸的是，我在 jquery 中获得了代码。

jquery 代码：

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

#stack overflow link

#jsFiddle link

但我需要角度数据表。如果你有一个例子，如何捕捉上一个/下一个点击事件。

按钮行点击事件

 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 代码并使用箭头函数来维护对 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 demo