How to use DataTable in Angular 2

Question

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!

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
– 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
– 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
– hamras, Commented Jul 19, 2016 at 11:17

jcmordan · Accepted Answer · 2016-08-16 19:53:52Z

5

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

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.

answered Aug 16, 2016 at 19:53

jcmordan

1,04813 silver badges21 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

DarioN1 Over a year ago

Can you provide full example ?

Kael Vergara Over a year ago

@DarioN1 here's a quick sample using the datatable as a directive - https://plnkr.co/edit/t0Zwc3AtQTt98XvIirZ9?p=preview

Collectives™ on Stack Overflow

How to use DataTable in Angular 2

1 Answer 1

2 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related