Using Datatables in Aurelia

devteamg

I recently updated to the latest version of Datatables and when I am using Aurelia's repeat.for on the table via HTML no data shows.

If I populate datatables with pure javascript and nothing in my

<

table> tag I can get it to work for simple tables. The console throws an error when mine setup is using the repeat.for and I am guessing Aurelia and datatables are trying to mess with the same elements?

kthorngren

Cannot read properties of null (reading 'insertBefore')

There is a similar error in this thread regarding VUE.

I am guessing Aurelia and datatables are trying to mess with the same elements?

Based on that thread it seems likely. I'm not familiar with Aurelia but it may want to control the table which would conflict with what Datatables does.

If I populate datatables with pure javascript and nothing in my table tag

How are you doing this?

See this example of populating with Javascript data. Possibly you need to create a thead or use columns.title to create the header. See the HTML docs for details. Also read the data docs for supported data structures.

Kevin

devteamg

Thank you for the response Kevin. To answer your question on how I populate the datatables with pure javascript. This is a sample of a table that populates all from the model.

I looked at all of the links and these are really just very basic examples which are easy if you don't have a ton of custom code needing to display.

The reason I am trying to avoid populating with just javascript is because of the amount of custom code I would need to write. For example I would need to convert this html to javascript in the datatables init call.


Just trying to avoid this if there is an easy solution.

kthorngren

The way you are populating the table is probably the best. Using something like columns.render to replicate might be difficult and complex.

Possibly you can use the browser's debugger to trace the error to find what is null. Without seeing the issue its hard to say why you are getting the error and if it's caused by using Datatables. Can you provide a test case showing the issues you are having so we can take a look and help debug?
https://datatables.net/manual/tech-notes/10#How-to-provide-a-test-case

@allan might be familiar with Aurelia to let you know if there is issues between the two.

Kevin

kthorngren

Also make sure the table is built before initializing Datatables.

Kevin

devteamg

In our previous version of Datatables 1.10x this works just fine so I know it's a change in Datatables that is breaking it. I can sure try and get an example going.

kthorngren

For debugging purposes I think it would be best to use non minified Datatables code.

Kevin

devteamg

Placing this here as a resolution. So it's purely a timing issue. The way I was handling it before using MutationObserver where I would destroy the datatable after every repeat iteration and on the last repeat it should load up a completed table. Doesn't seem to work anymore. I found this article on the web that is pretty old but it still works.

https://discourse.aurelia.io/t/await-repeat-for-rendering-finish/4395
Adding a screenshot here incase the link ever goes away.

You just need to call this.loadItems() in your bind, attached, or activate methods. Make sure you also include the customElement in your html.
<require from="./../../resources/custom-elements/promise-resolver"></require>

I now have a working datatable.

Thanks for the quick support and thoughts. It's much appreciated.

kthorngren

Good deal. Glad you got it working and thanks for posting the resolution.

Kevin