How to apply different styles to a table

luloxyn

Hello, my question not sure if possible is how I can load a different style depending on a dropdown choice?

When adding different .CSS styles on the header the table are overloading all the styles, some of the .css styles are using same table class so I'm not sure what to do.

http://jsfiddle.net/gaucdte1/

Any suggestion?
Thanks.

colin

Hi @luloxyn ,

When you say different styling, what do you mean? Is that flipping between Bootstrap and foundation, or between styling options like in the examples here.

It would be useful to update your example to reflect that, to show the different styles you want on those dropdowns, since it's currently only just initialising a standard table.

Cheers,

Colin

luloxyn

Hi @colin ,
I want to have the possibility to change between those styles:
Bootstrap 3
Bootstrap 4
Foundation
Semantic UI
jQuery UI ThemeRoller
Material Design (Tech. preview)
UIKit 3 (Tech. preview)
Depending on the dropdown choice:
I want to know how I can do that, and how to limit my table to load only the required "files/resources" that needs for each selection.

I updated the example and added the drop-down input.
http://jsfiddle.net/febspaq6/

Thanks.

kthorngren

Dynamically loading the JS and CSS files is outside the scope of Datatables. I've not tried it my self but I found this that discusses one option:
http://www.javascriptkit.com/javatutors/loadjavascriptcss.shtml

You are probably better off looking on Stack Overflow or some other resources that are more HTML development focused.

Kevin