DataTables issues

Development
1

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):

image.png
image.png1920×975 91.9 KB

2

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

3

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…

4

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)

5

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: DataTables.net with webpack · GitHub).
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):

image
image1849×358 20.2 KB

Any ideas?

Thanks

6

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.

7

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!

8

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.

image
image.png1791×764 35.6 KB

Thanks for all your help, @ThiefMaster!