CODEWITHSUNDEEP
jqueryangulardatatable
Vigneshwaran Markandan
Vigneshwaran Markandan

Reputation: 945

Accessing JQuery Datatable inside Angular 2 Component

I am fetching data from an API and rendering it using Angular 2.

getData() {
        this.http.get('api/Employee').subscribe(result => {
            var localdata = result.json();
            for (var i = 0; i < localdata.length; i++)
                this.employeeList.push(localdata[i]);
            console.log(this.employeeList);   
            $('#example').DataTable();
        })
    }

Once I get the data I have to convert the normal table to Jquery Datatable using 

$('#example').DataTable();

But I am facing below issue shows: No data available in table along with data.

enter image description here

Upvotes: 2

Views: 1954

Answers (2)

Vigneshwaran Markandan
Vigneshwaran Markandan

Reputation: 945

Finally solved this issue by importing AfterViewInit 

export class EmployeeComponent implements AfterViewInit {   

    ngAfterViewInit() {
            setTimeout(() => {
                $('#example').DataTable();
            }, 1000);

        }
}

Upvotes: 1

Dario Griffo
Dario Griffo

Reputation: 4274

I would suggest you to use angular-datatables

If that is not the case you can use array source like indicates here

$('#example').DataTable( {data: this.EmployeeList });

Also remember to destroy any existing datatable if you have already created one

Upvotes: 1

Related Questions