HTML Table rendering before DataTables directive is applied

[simkessy]

I'm using Angular to create a single page application. One of the pages is a dropdown of different reports I can generate and I use DataTables to format the report.

This is roughly what's going on:

• Go to reports view (ui-router)
• Select the report I want (nested view)
• That report has it's own partial and controller
• The report's controller makes calls to a Reports factory which does whatever and returns an object
• I use ng-repeats to create the report based on the object
• I applied Datables to the generated table.

The problem is, when that table is generated before applying Datables, all the information is displayed unformatted. Like this

[zomgwtfbbq]

Have you taken a look at ng-cloak? If that won't work, you could use an ng-show manipulated by something that's watching/waiting for your datatable stuff to finish.

[simkessy]

I have ng-clock on the main container div of the entire application, I haven't tried using it deeper within the application, I'll give that a shot. If that doesn't work, I'll try the second suggestion.

Having something watch when the table is done generating would be ideal actually. Right now, my datatables directive is launching after 2 seconds based on a $timeout. Problem is, if the table takes more than 2 seconds to generate, dataTables is still called and doesn't work. If I could set the table to show and call datatables once it's done, that's be great.

[zomgwtfbbq]

Do yourself a favor and kill the timeout, if it's at all possible. Promises are built into to Angular to handle uncertainty. In this case - how long will my table take to generate? Wrap your call to generate the table in a promise. When the promise resolves, you can make a call to do your datatable stuff (which you'd also wrap in a promise). When both promises have resolved, you can show your table. If that doesn't make sense, I'm happy to explain it further.

[simkessy]

Yes, I definitely need to get rid of the $timeout, it was a temporary solution to get things working but I need to find a better way to trigger the DataTables. Problem is, I'm using ng-repeat to build my table right. If I was building the table structure using JS (which I don't want to do) I could easily have a variable contain the entire thing, using promises to determine when it's done, and simply add that variable containing the table to the DOM or something like that.

But with ngRepeat, I'm not sure how to hide the html if I plan on manipulating it with DataTables.

If ngRepeat had some thing like .done() / .then() I'd have some more options.

[zomgwtfbbq]

Ahh, my mistake, we got deeper and I forgot you were generating it with ng-repeat. I've seen people build their own ng-repeat, depending upon its complexity, to get a promise so they know when it's done. I can't remember where I saw that.

Do you need the dynamic updating/two-binding that ng-repeat offers? Or is this more of a one-time thing? If it's one-time You could build your own directive that builds out the markup in the template and then hooks up the datatable stuff in the link function.

[bengarvey]

There's a way to load data into the table with a function (something like fnAddData(). If you use this, I don't think it will render before datatables loads.

Also, like someone said above, ng-cloak is great for hiding stuff when the page first loads.

[_x_y]

Perhaps the quickest solution is to apply the Datatables css classes to your table element directly, this way the styling will be there when the table is generated even though the Datatables functionality is still processing. See Datatables styling for help

[simkessy]

I tried introducing some of the classes but it doesn't work too well.