Как перехватить событие нажатия на кнопки нумерации страниц следующей / предыдущей DataTables Angular 5 - PullRequest
Новая
       22

Как перехватить событие нажатия на кнопки нумерации страниц следующей / предыдущей DataTables Angular 5

0 голосов
/ 19 сентября 2018

Как перехватить событие клика в кнопках пагинации предыдущий / следующий в угловом 5. К сожалению, я получил код в jquery.

jquery code: 

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

# переполнение стекассылка

# 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
}

Поскольку у меня в бэкэнде тысячи записей.

Ответы [ 4 ]

0 голосов
/ 19 сентября 2018

Вы можете использовать любой код 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');
  }

}

демонстрация стекаблиц

0 голосов
/ 19 сентября 2018

Решение состоит в том, чтобы использовать делегирование события, предоставляя селектор для целевого элемента в качестве второго аргумента в вызове on (), см. Пример ниже.Согласно документации jQuery ()

0 голосов
/ 19 сентября 2018

Вам необходимо предоставить ссылку на ваш компонент 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();
        });
      }
  });
}

Просто проверьте свою область.Используя функции со стрелками, вы можете получить доступ к методам, написанным в вашем классе, и это должно сработать

0 голосов
/ 19 сентября 2018

Я рекомендую использовать библиотеку ngx-datatable, очень полную и простую в использовании!Даже документация хороша!https://github.com/swimlane/ngx-datatable

...