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

Question

How to catch click event in pagination buttons previous/next in angular 5. unfortunately I got the code in jquery.

jquery code:

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

#stack overflow link

#jsFiddle link

But I need angular data table. If you have an example, how to catch the previous/next click event.

Button Row Click event

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

Whole Row Click Event

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

Expecting next/previous button click event

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
}

Because I have thousands of records in my backend.

Answer 1

I recommend using ngx-datatable library, very complete and easy to use ! Even the documentation is good ! https://github.com/swimlane/ngx-datatable

Answer 2

The solution is to use event delegation by providing selector for target element as a second argument in on() call, see example below. According to jQuery on() documentation

Answer 3

You need to provide a reference to your Angular component about the element that you are going to bind the functionality

<div #mytable></div>

In your component add an element reference with ViewChild

@ViewChild('mytable') tableRef: ElementRef;

Then use that element reference to bind the functionality that you want and make it accessible in angular

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();
        });
      }
  });
}

Just test your scope. By using arrow functions you can access the methods written in you class and that should do the trick

Answer 4

You can use any jquery code inside you component and use arrow function to maintain reference to this

component

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