Wie verwendet man DataTable in Angular 2

Question

Ich möchte die DataTable in meiner Angular 2 App verwenden. Aber das funktioniert nicht. In Angular 2 ist es nicht möglich, ein Skript-Tag in Vorlagen einzufügen. Weißt du wie ich das machen kann? Ich denke, ich muss einige Änderungen an den Systemen vornehmen.

list.html:

<table id="example" class="display" cellspacing="0" width="100%"> 
     <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> 

meine Komponente:

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

In meiner index.html habe ich die erforderlichen libaries hinzugefügt:

<!-- 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> 

Vielen Dank im Voraus!

Answer 1

Sie können eine Direktive für DataTable erstellen und dann die Direktive für Ihre Komponente verwenden.

some wie folgt aus:

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) 
     }); 
    } 
} 

dieses Beispiel könnte verbessert werden, aber für die Grundausstattung ist es ok.