如何在 Angular 2 中使用 DataTable

Posted 2023-05-07

【中文标题】如何在 Angular 2 中使用 DataTable

【英文标题】：How to use DataTable in Angular 2

【发布时间】：2016-11-22 05:05:20

【问题描述】：

我想在我的 Angular 2 应用程序中使用 DataTable。但这不起作用。在 Angular 2 中无法在模板中添加脚本标签。你知道我该怎么做吗？我想我必须在 systemJs 中做一些更改。

list.html:

<table id="example" class="display" cellspacing="0" >
        <thead>
            <tr>
                <th>Name</th>
                <th>Position</th>
                <th>Office</th>
                <th>Age</th>
                <th>Start date</th>
                <th>Salary</th>
            </tr>
        </thead>
        <tfoot>
            <tr>
                <th>Name</th>
                <th>Position</th>
                <th>Office</th>
                <th>Age</th>
                <th>Start date</th>
                <th>Salary</th>
            </tr>
        </tfoot>
        <tbody>
              <tr>
                <td>Gavin Cortez</td>
                <td>Team Leader</td>
                <td>San Francisco</td>
                <td>22</td>
                <td>2008/10/26</td>
                <td>$235,500</td>
            </tr>
            <tr>
                <td>Martena Mccray</td>
                <td>Post-Sales support</td>
                <td>Edinburgh</td>
                <td>46</td>
                <td>2011/03/09</td>
                <td>$324,050</td>
            </tr>
        </tbody>
    </table>

我的组件：

...
declare var jQuery:any;
..
ngOnInit():any
       console.log("Augerufen");
       jQuery('#example').DataTable();
   
...

在我的 index.html 中，我添加了所需的库：

<!-- Bootstrap Core CSS -->
    <link href="css/bootstrap.min.css" rel="stylesheet">
    <link href="css/jquery.dataTables.min.css" rel="stylesheet">
<!-- jQuery -->
    <script src="js/jquery.js"></script>
    <script src="js/jquery.dataTables.min.js"></script>
    <!-- Bootstrap Core javascript -->
    <script src="js/bootstrap.min.js"></script>

提前致谢！

【问题讨论】：

什么不起作用？目前尚不清楚您要做什么，您提供的代码是演示代码，并且工作正常。另外，您为什么要使用 jquery 来处理带有 angular 的更改事件？

我想过滤表格，使用 dataTables 你可以轻松做到这一点。我将代码放在 index.html 中，它可以工作。但是，如果我使用嵌入的 test.html，它不会执行 jQuery 代码。我也用 window.alert("test") 试过了。事件这不起作用

Ok 无法在模板中添加脚本标签。 Angular 2 删除它

【参考方案1】：

您可以为 DataTable 创建一个指令，然后在您的组件上使用该指令。

类似的东西：

import Directive, ElementRef from '@angular/core';
import Input, OnInit         from '@angular/core';


import  JqueryDataTableEvent  from './jquery-datable-event';
import 'jquery.dataTables';

declare var jQuery:any;

@Directive(
    selector: '[jqueryDatatable]'
)

export class JqueryDatatableDirective implements OnInit 
    private _datatable : any;

    @Input()
    jqueryDatatable: any;

    @Input()
    dataTableEvents: JqueryDataTableEvent[];

    constructor(private _element: ElementRef) 

    ngOnInit() 
        this.applyOptions();
        this.applyEvents();
    

    applyOptions()
    
        if (!this.jqueryDatatable)
            console.error("Empty options array was passed to initialize jqueryDatatable.");

        this._datatable = jQuery(this._element.nativeElement).DataTable( this.jqueryDatatable ||  );

    

    applyEvents() 
        this.dataTableEvents.map((event)=> 
            this._datatable.on(event.eventName, event.selector, event.callback)
        );
    

这个例子可以改进，但基本功能还可以。

【讨论】：

你能提供完整的例子吗？

@DarioN1 这是一个使用数据表作为指令的快速示例 - https://plnkr.co/edit/t0Zwc3AtQTt98XvIirZ9?p=preview