0

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.

KaMZaTa
  • 535
  • 2
  • 9
  • 24
  • I don't know jTable, but what's about to use a class in your table to address the general settings and an id for every table to style it? – Joerg Feb 15 '15 at 09:32

1 Answers1

1

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>
Community
  • 1
  • 1
Runcorn
  • 5,144
  • 5
  • 34
  • 52
  • Thank you but I don't understand. If I bound to fetch my table through id (e.g.: `
    `), do I need to wrap it like this `
    `? Furthermore, where I set theme path?     – KaMZaTa Feb 15 '15 at 10:54
  • I also tried to add class on the same div `
    ` but still doesn't work.     – KaMZaTa Feb 15 '15 at 11:21
  • Ok, the problem was the missing dot at beginning in theme scope: `CSS Scope = .table1` – KaMZaTa Feb 15 '15 at 11:37