DataTables issues

Hi guys,

Has anyone tried to get DataTables (https://datatables.net/) running on Indico?

I managed to install DataTables correctly (I think) by running:

npm install datatables.net
npm install datatables.net-dt

All good, and the table actually works just fine, but I can’t seem to get the styling working :frowning:
I’m not sure if I’m supposed to install the .css file for it separately (supposedly they are embedded inside datatables.net-dt , but are not working “out of the box”) and include it in the client folder and then refer to it in the webpack-bundles.json (recompile with the asset builder) and then inject it in code (via self.inject_bundle('main.css', WPBase) or similar?)

This is how it looks like now (obviously the styles are not loaded for the DataTable):

Guys, I’m really stuck here :frowning: Anyone? :frowning:

I think I mentioned in the other thread that you need to inject both main.js and main.css :wink:
Assuming you import it inside your client/index.js, that should work.

If not I’d recommend you to put the code on GitHub so we can actually have a look - otherwise it’s really just a lot of guessing…

Yep, and I definitely appreciate you pitching in again, but I think this would be the “non-intended” way of doing it. Installing datatables.net-dt is supposed to somehow autoinject the DataTables styles, I believe. My index.js file contains only these two lines:

import ‘datatables.net’;
import ‘datatables.net-dt’;

, so I assume that by injecting it inside my plugin.py file with self.inject_bundle('main.js', WPBase), that’ll somehow take care of loading the appropriate styles in the browser.

I’m clueless :frowning: Don’t know enough about what’s going on behind the scenes in either DataTables and Indico when I use self.inject_bundle('main.js', WPBase)

I got it to work, almost 100%.

As you said, I had to include main.css via self.inject_bundle('main.js', WPBase), but initially this was not working because my original imports:

import ‘datatables.net’;
import ‘datatables.net-dt’;

are supposedly wrong (see this: https://gist.github.com/obonyojimmy/8cf71c7d6342c851c134289f936dca93).
I changed them to:

import ‘datatables.net’;
import ‘datatables.net-dt/css/jquery.dataTables.css’;

, and then recompiled the assets, and now it looks much better, but still not 100% (I am using the DataTables base style, and I am supposed to see alternating colors (grayish) for the even/odd rows):

Any ideas?

Thanks

None of us use this library so not really.

I’d use the browser’s developer tools to check if the styles are maybe overridden by something else.

It seems that a lot of the styles are applied correctly, but some or not. Not sure why. I’ll troubleshoot myself from here on, as this seems to be a non-Indico related issue. Thanks for helping me get DataTables up and running!

Finally got it working with all styles applied correctly. As soon as I get a bit of free time, I’ll post the entire procedure to getting DataTables up and running in Indico in a separate thread.

Thanks for all your help, @ThiefMaster!