Попытка добавить событие щелчка строки в угловых таблицах данных, но это не работает - PullRequest
Новая
       35

Попытка добавить событие щелчка строки в угловых таблицах данных, но это не работает

0 голосов
/ 27 июня 2019

Я внедрял row-click-event в мои таблицы данных.Используя учебник и пример из (http://l -lin.github.io / angular-datatables / # / advanced / row-click-event )

Я сделал макет таблицы жестким кодированиемтаблица в HTML для запуска примера.Проблема в том, что функция rowCallback не работает вообще, когда я загружаюсь на веб-страницу.Из того, что я могу сказать, работает основная функциональность данных, сортировка, фильтрация поиска и т. Д. Но я не могу получить щелчок даже для привязки к каждой записи.Я пытался решить эту проблему в течение нескольких дней.Может кто-нибудь сказать, что может быть не так с моим кодом? 

<div class="col-md-12">
    <p class="homeText">{{homeText}}</p>
</div>
<blockquote>Please click on a row</blockquote>
<p class="text-danger">You clicked on: <strong>{{ message }}</strong></p>
<br />
<table datatable class="row-border hover">
    <thead>
      <tr>
        <th>ID</th>
        <th>First name</th>
        <th>Last name</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>1</td>
        <td>Foo</td>
        <td>Bar</td>
      </tr>
      <tr>
        <td>2</td>
        <td>Someone</td>
        <td>Youknow</td>
      </tr>
    </tbody>
  </table>

import { Component, OnInit } from '@angular/core';

@Component({
  selector: 'app-home',
  templateUrl: './home.component.html',
  styleUrls: ['./home.component.css']
})
export class HomeComponent implements OnInit {
  message = 'placeholder';
  public homeText: string;
  dtOptions: DataTables.Settings = {};

  constructor() { }

  someClickHandler(info: any): void {
    this.message = info.id + ' - ' + info.firstName;
  }

  ngOnInit() {
    this.homeText = "Welcome home";
    this.dtOptions = {
      ajax: 'data/data.json',
      columns: [{
        title: 'ID',
        data: 'id'
      }, {
        title: 'First name',
        data: 'firstName'
      }, {
        title: 'Last name',
        data: 'lastName'
      }],
      rowCallback: (row: Node, data: any[] | Object, index: number) => {
        const self = this;
        // Unbind first in order to avoid any duplicate handler
        // (see https://github.com/l-lin/angular-datatables/issues/87)
        $('td', row).unbind('click');
        $('td', row).bind('click', () => {
          self.someClickHandler(data);
        });
        return row;
      }
    };
  }
}

1 Ответ

0 голосов
/ 27 июня 2019

Благодаря тому, что указал sabithpocker.Мне не хватало js [dtOptions]="dtOptions", а также я включил js ajax: 'data/data.json',, который вызывал эту ошибку «Предупреждение DataTables: идентификатор таблицы = {id} - ошибка Ajax» https://datatables.net/manual/tech-notes/7

...