Angular 6 DataTables initially display but filter controls does not work

c0micrage

Hello,

I am trying to add DataTable to my grid on Angular 6. The grid initially displays with JSON data. However, when I click on the number of records 10, 25, 50, 100, Column Sorting, Search text, or the pagination controls, all the grid data disappears.

I have to reload the page to see the data again.

I installed the following to my project

npm install bootstrap@4.0.0-beta.2 --save --save-exact
npm install datatables.net --save
npm install datatables.net-bs4 --save
npm install jquery --save
npm install @types/jquery --save-dev

Any help is greatly appreciated.

Here is my users.components.ts

import { Component, OnInit, ChangeDetectorRef } from '@angular/core';

import { UserService } from '../../services/user.service';
import { Observable } from 'rxjs';
import { User } from '../../models/user';
import 'rxjs/add/Observable/throw'

import * as $ from 'jquery';
import 'datatables.net';
import 'datatables.net-bs4';

@Component({
  selector: 'app-users',
  templateUrl: './users.component.html',
  styleUrls: ['./users.component.scss']
})

export class UsersComponent implements OnInit {

  users$: any[];
  datatable: any;
 
  constructor(private userService: UserService, private chRef: ChangeDetectorRef ) 
  { 
  }

  ngOnInit() {
    this.getUsers();
  }

  getUsers() {
    this.userService.getUsers()
    .subscribe(( data: any[] )=> {
      this.users$ = data;
      (error) => {
               this.statusMessage = 'Problem with the service. Please try again later.';  
               console.error(error);
            }
      ;

     // this.chRef.detectChanges();
      const table: any = $('table');
      this.datatable = table.DataTable();
    });
  }
}



users.component.scss

@import "~bootstrap/dist/css/bootstrap.css";
@import "~datatables.net-bs4/css/dataTables.bootstrap4.css";

colin

Hi @c0micrage ,

We're happy to take a look, but it would help, as per the forum rules, if you could link to a running test case showing the issue so we can offer some help. Information on how to create a test case (if you aren't able to link to the page you are working on) is available here.

Cheers,

Colin

rafysanchez

git clone https://github.com/rafysanchez/DataTableExample.git

Hagag

I have the same Issue, all datatable functions not working and data goes away when using search, paging or ordering.

colin

Hi @Hagag ,

Are you able to link to your page, or create a test case, please? The instruction are in my previous reply above.

Cheers,

Colin

richmanrichie

So I had the same issue and decided to invoke the data table inside a set-timeout function and it worked for me.

samandhare

Hi
@richmanrichie - I am facing the same issue. can you please paste your code here.

YGalal

i facing the same issue

nishanc

Declare your data variable empty to initialize it.

ngOnInit(){
this.users = [];
this.getUsers();
}

Then it should work fine.

nishanc

Take look at this also stackoverflow.com/questions/44940021/data-table-is-showing-no-data-available-in-table-using-angular