尝试在Angular DataTables中添加行点击事件,但它不起作用



i是在我的数据列表中实现cow-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;
      }
    };
  }
}

感谢SabithPocker指出的内容。我缺少js [dtOptions]="dtOptions",还包括js ajax: 'data/data.json',,该错误引起了此错误" DataTables警告:表ID = {ID} - AJAX错误"https://datatables.net/manual/tech-notes/7

最新更新