How can I set different themes to multiple (jQuery) jTable on the same page?

I need to place different jTable on the same page.

How can I set different theme for each table?

I've tried something like:

$('#TableContainer').jtable({
                    jqueryuiTheme: 'js/jtable/themes/metro/blue/jtable.min.css',
                    title: 'My table title',
                    actions: {
                       .......

but it doesn't work.

Solution

From the documentation of jTable It is pretty clear that they are using jquery-ui themeroller for themes,

jTable has it's own themes those can be used easily. But, you may want to use color schema and styles of your jQueryUI as jTable's theme. So, this option can be used to declare jTable to use jQueryUI's colors and styles. To do it, set jqueryuiTheme: true in your jTable initialization code

So, Then to the question how to use multiple themes in a single page.

jQuery UI provides a method for defining CSS Scope in the theme. Thus allowing you to define your own wrapper for theme, which in turn allows you to use multiple themes in a single page.

Please see this Q/A for more details.

So after you download the theme with CSS Scope the theme file would look like,

CSS Scope = table1
theme= Sunny

jquery-ui.theme

/* Component containers
----------------------------------*/
table1 .ui-widget {
    font-family: Segoe UI,Arial,sans-serif;
    font-size: 1.1em;
}
table1 .ui-widget .ui-widget {
    font-size: 1em;
}
table1 .ui-widget input,
table1 .ui-widget select,
table1 .ui-widget textarea,
table1 .ui-widget button {
    font-family: Segoe UI,Arial,sans-serif;
    font-size: 1em;
}
..................
.....................
.....................

So, you can either manually add it in your theme or bundle it from jquery ui downloads.

And for jTable use it as,

<div class='table1'>//jTable here</div>
<div class='table1'>//jTable here</div>
<div class='table2'>//jTable here</div>