Integrating DataTables into a simple EmberJS application

I struggled with these exact issues. I found that the initial table load had incomplete rows but then visiting another page and coming back made it work.

I initially used the didInsertElement hook. When that didn’t work, I hooked directly into the Ember run loop after the render event. When that didn’t work, out of desperation, I just wrapped the dataTables() call in a ridiculous setTimeout() call (i.e. the setTimeout function that native javascript gives us). Amazingly, setting this to even a delay of 0 seconds fixed the issue!

But then every time I would visit this page after the initial visit, there would be a momentary flicker while the DOM was updating. Ultimately, I concluded there is a fundamental impedance mismatch between the world of datatables, which assumes it is free to manipulate the DOM whenever it pleases, and Ember, which manages all DOM manipulation for us.

For this reason, I wrote my own paginator. See Pagination/Sorting/Filtering for a beginner - #4 by josh_padnick.

For more details on my datatables struggles see dom - Calling jQuery Plugin with EmberJS Creates Race Condition - Stack Overflow.