JQuery Datatable Shows No Data Available Together With Angular JS Asynchronous Data

When I tried using the Datatable feature of JQuery together with Angular JS, it was smooth sailing. After all, the data used was static, meaning I created the objects upon initialization.

When it was time to use real data from the database, the JQuery Datatable shows the “No data available” even though there are some data in it.

The cause for this is that the data retrieved was asynchronous, so once the object that the Datatable used has contents, it will populate those objects within it. However, the “No data available” message still appears.

That, and the Datatable was created before any data was populated with it contributed to this behavior.

I came across a solution from a user in the StackOverflow forum named tasseKATT.

What he did was to add a directive to the app and using the timeout after the DOM has rendered to then create the Datatable while also adding an ng-if expression where the table creation takes place such that if the object used contains more than 1 entry, then that will be the time that the table DOM will be created and such, the Datatable creation will also be called.

Pretty sweet.

Related Posts Plugin for WordPress, Blogger...

1 comment

Leave a Reply

Your email address will not be published. Required fields are marked *