Angular 2 DataTable

Question

I'm trying to work with Jquery DataTable on angular 2 app, I've installed it successfully but still not work and I don't know why !

here is my component.ts file code:

import {Component, ElementRef, OnInit} from '@angular/core';
import {Injectable } from '@angular/core';
import {Http, Response} from '@angular/http';
const $ = require('jquery');
const dt = require ('datatables.net');
@Component({
  selector: 'app-cartographie',
  templateUrl: './cartographie.component.html',
  styleUrls: ['./cartographie.component.css', '../../../../node_modules/datatables.net-dt/css/jquery.dataTables.css']
})

export class CartographieComponent implements OnInit {
  public data;
  rootNode: any;

  constructor(rootNode: ElementRef, private http: Http) {
    this.rootNode = rootNode;
  }
  ngOnInit() {
    this.getData();
    const el = $(this.rootNode.nativeElement).find('#example')[0];
    $('#example').DataTable();
  }

  private getData() {
    this.http.get('http://localhost/ang.php/')
      .subscribe(res => this.data = res.json());
  }
}

and here is the component.html file code :

<div class="container">
  <div class="panel">
    <div class="panel-heading">
      <div class="panel-title text-center">
        <h3>Cartographie</h3>
      </div>
    </div>
    <div class="panel-body">
    </div>
    <div class="row">
      <div class="col lg-12">
        <div class="example ">
          <table class="table table-striped display" id="example" >
            <thead >
            <tr>
              <th>Nom du poste</th>
              <th>Emploie</th>
              <th>Metier</th>
              <th>Famile</th>
            </tr>
            </thead>
            <tbody *ngFor="let grid of data">
            <tr class="gradeA">
              <td>{{ grid.NomDuPoste}}</td>
              <td>{{ grid.Emploie}}</td>
              <td>{{ grid.Metier  }}</td>
              <td>{{grid.Famille}}</td>
            </tr>
            </tbody>
          </table>
        </div>
      </div>
    </div>
  </div>
</div>

the search and number of data displayed not working. PS: my data coming from php script.

here is a screenshot : http://hpics.li/efa3c31

Abrar · Accepted Answer · 2017-06-21 12:25:45Z

2

Notice here that you are accessing the DOM using jQuery in the ngOnInit() lifecycle hook.

ngOnInit()

Initialize the directive/component after Angular first displays the data-bound properties and sets the directive/component's input properties. Called once, after the first ngOnChanges(). -- https://angular.io/guide/lifecycle-hooks

But in your case the component's view must be rendered before you can access the DOM.

ngAfterViewInit()

Respond after Angular initializes the component's views and child views. Called once after the first ngAfterContentChecked(). -- https://angular.io/guide/lifecycle-hooks

You should modify the CartographieComponent's code like this:

import {AfterViewInit} from '@angular/core';

// other imports here

export class CartographieComponent implements OnInit, AfterViewInit {

  // other code here

  ngOnInit() {
    this.getData();
  }

  ngAfterViewInit(){
    const el = $(this.rootNode.nativeElement).find('#example')[0];
    $('#example').DataTable();
  }

}

Hope this solves your problem.

answered Jun 21, 2017 at 12:25

Abrar

7,2729 gold badges31 silver badges45 bronze badges

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

1 Comment

547n00n Over a year ago

Hi Abrar , Thanks for your answer , I tried your solution but nothing change and still not work !

Collectives™ on Stack Overflow

Angular 2 DataTable

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related