javascript - How to use DataTable in Angular 2 - Stack Overflow

admin管理员组

文章数量:1406037

I want to use the DataTable in my Angular 2 app. But this is not working. There is no possiblity in Angular 2 to add a script tag in templates. Do you know how can I do this? I think I have to do some changes in the systemJs.

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>

my Component:

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

In my index.html I have added the required libaries:

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

Thanks in advance!

I want to use the DataTable in my Angular 2 app. But this is not working. There is no possiblity in Angular 2 to add a script tag in templates. Do you know how can I do this? I think I have to do some changes in the systemJs.

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>

my Component:

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

In my index.html I have added the required libaries:

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

Thanks in advance!

• javascript
• jquery
• html
• angular
• datatables

Share Improve this question Follow edited Jul 19, 2016 at 20:35 Gyrocode. 59k1616 gold badges156156 silver badges192192 bronze badges asked Jul 19, 2016 at 10:42 hamrashamras 28711 gold badge55 silver badges99 bronze badges 3

• What is not working ? It's not clear what you're trying to do, the code you provided is the demonstration code, and it is working fine. Also why are you using jquery to handle change events with angular ? – Pogrindis Commented Jul 19, 2016 at 10:57
• I want to filter the table and with dataTables you can do this easily. I i put the code in the index.html it works. But if I use the emedded test.html it does not execute the jQuery Code. I also tried it with window.alert("test"). Event this is not working – hamras Commented Jul 19, 2016 at 11:01
• Ok It is not possible to add a script tag in template. Angular 2 deletes it – hamras Commented Jul 19, 2016 at 11:17

Add a ment  | 

1 Answer 1

Sorted by: Reset to default 5

You can create a Directive for DataTable, then use the directive on your ponent.

someting like that:

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

this example could be improved, but for basic features its ok.

本文标签： javascriptHow to use DataTable in Angular 2Stack Overflow