Question

我使用了带有jQuery的angular2，我创建了一个数据表，当我使用静态数据时一切都很好，但是只要我做一个循环* ng就没有用了（过滤，分页，搜索）

component.html

<blocks>
        <products1>
            <class>Company_Namespace_Block</class>
        </products1>
        <products2>
            <class>Company_Namespace_Block</class>
        </products2>
</blocks>

compoent.ts

<table id="dtb" class="table table-striped table-no-bordered table-hover" cellspacing="0" width="100%"
           style="width:100%">
      <thead>
      <tr>
        <th>Name</th>
        <th>Position</th>
        <th>Office</th>
        <th>Age</th>
        <th>Date</th>
        <th class="disabled-sorting text-right">Actions</th>
      </tr>
      </thead>
      <tfoot>
      <tr>
        <th>Name</th>
        <th>Position</th>
        <th>Office</th>
        <th>Age</th>
        <th>Start date</th>
        <th class="text-right">Actions</th>
      </tr>
      </tfoot>
      <tbody>
      <tr *ngFor="let data of datas">
        <td>{{data.Name}}</td>
        <td>{{data.Position}}</td>
        <td>{{data.Office}}</td>
        <td>{{data.Age}}</td>
        <td>{{data.Date}}</td>
        <td class="text-right">
          <a href="#" class="btn btn-simple btn-info btn-icon like"><i class="material-icons">favorite</i></a>
          <a href="#" class="btn btn-simple btn-warning btn-icon edit"><i class="material-icons">dvr</i></a>
          <a href="#" class="btn btn-simple btn-danger btn-icon remove"><i class="material-icons">close</i></a>
        </td>
      </tr>
      </tbody>
    </table>

有些帮助吗？谢谢所有

Answer 1

将数据传递给数据表，让它担心渲染记录。像这样：

在component.html中：

let options = {
    data: this.datas,
    columns: [
        { data: 'Name' },
        { data: 'Position' },
        {
            render: function (a, b) {
                return '<a href="#" class="btn btn-simple btn-info btn-icon like my-datatable-btn" id="' + a.Id + '"><i class="material-icons">favorite</i></a>';
        }
   }]

}

jQuery(this._elRef.nativeElement).find('#dtb').DataTable(options);

在你的component.ts中：

this._elRef.nativeElement.addEventListener('click', (event) => {
    var className = $(event.target).attr('class');
    if(className.indexOf('my-datatable-btn') > -1) { //check if the target of the click event is what you want.
        //Call your onclick handler here.
    }
});

如果你想绑定一个＆＃39; angular2事件或属性＆＃39; （如（点击）或[routerLink]）到数据表中的超链接，它不会起作用，因为这个HTML已经动态地“运行”了。产生。要做到这一点，你还必须做一些事情：

data

除了在您的情况下传递{{1}}之外，您可以将other useful options传递给数据表。

Answer 2

这是因为你只是在视野中显示数据。您的jQuery DataTables对您的数据源一无所知。这就是为什么你的分页，搜索和其他选项不起作用的原因。你可以做的基本上是通过jQuery DataTables显示数据，然后你就可以使用可用的选项（数据将被加载到dataTables）。

Angular 2，jQuery，* ng不工作？

2 个答案: