Accessing JQuery Datatable inside Angular 2 Component

Question

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.

Dario Griffo · Accepted Answer · 2017-07-26 14:08:48Z

1

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

answered Jul 26, 2017 at 14:08

Dario Griffo

4,3223 gold badges21 silver badges35 bronze badges

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

1 Comment

Vigneshwaran Markandan Over a year ago

Thanks, but there are some limitations for using angular-datatables. and very less documentation.

Vigneshwaran Markandan · Accepted Answer · 2017-07-27 08:10:39Z

1

Finally solved this issue by importing AfterViewInit

export class EmployeeComponent implements AfterViewInit {   

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

        }
}

answered Jul 27, 2017 at 8:10

Vigneshwaran Markandan

9452 gold badges17 silver badges38 bronze badges

Collectives™ on Stack Overflow

Accessing JQuery Datatable inside Angular 2 Component

2 Answers 2

1 Comment

Comments

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

Comments

Related