Localize “Entries”, move “Prev/Next”, enable ThemeRoller

afarber

Hello,

thank you for your plugin, I have donated USD 5 too.

I'm trying to use DataTables in the PHP script displaying weekly players of my game in Russian language at http://preferans.de/top20.php , but:

1) I can't find the option for localizing the "Showing 1 to 20 of 3,558 entries" string
2) My buttons for "First Next 1 2 3 4 5 Prev Last" are way to the right in MSIE 7 and Chrome and even make the horizontal scrollbar appear, how could I move them to the left a bit? In Firefox 3.6.15 the page looks even more broken :-(
3) How do you enable the jQuery UI ThemeRoller support? I have tried the following code:

[code]




$(document).ready(function() {
$("#rating").dataTable( {
"bJQueryUI": true,
[/code]

but it hasn't produced the nice looking table as in the example and I can't figure out the reason, because my CSS/jQuery knowledge is not so good.

You can see the screenshot for my question here:
http://stackoverflow.com/questions/5434786/jquery-datatables-localize-entries-move-prev-next-enable-themeroller

Thank you for your help!
Alex

GregP

I posted a reply on StackOverflow; here's a copy:


To answer #3:

You have already enabled ThemeRoller Support with that option; but all the option does is enable the ability to add jQuery UI-specific classes to your table.

With the classes added, you still need to reference a jQuery UI stylesheet (note: this is just a sample; yours will be different).

[code] [/code]

Themeroller themes will also have a bunch of images that are a part of the theme, located as a subfolder of custom-folder-name. You don't necessarily need everything the ThemeRoller package produces, so you can sort of pick and choose; or keep the whole directory intact and only reference what you need. It's just a few bytes on the server to keep the unused stuff in place!

The sample seems to be cut a bit short, so you might already be doing this-- but don't forget that the last item of the initialization can't have a comma after it.

afarber

Thank you!

I've added the @import "/smoothness/jquery-ui-1.8.4.custom.css"; line (so including http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/jquery-ui.min.js is not necessary for DataTables?)
and now my script looks better ( at http://preferans.de/top20.php ) and it isn't broken in FF anymore.

However #1 is still valid and I have the new big problem of the "First Next 1 2 3 4 5 Prev Last" buttons (I've tried both Russian and English) being congested and unusable in all 3 browsers (MSIE7, FF3, Chrome).

Here is the copy of my current code:

[code]

@import "/demo_page.css";
@import "/demo_table.css";
@import "/smoothness/jquery-ui-1.8.4.custom.css";




$(document).ready(function() {
$("#rating").dataTable( {
"bJQueryUI": true,
"sPaginationType": "full_numbers"
} );
} );

[/code]

Regards
Alex

P.S. Yes, I know that usual problem with the comma at the end of array, but still thanks for telling that.

allan

Hi Alex,

It would be worth using the 'Support' option in the navigation header rather than 'Donate' in future if you want an answer to a question in the forum. It just allows me to track the threads and respond in a more timely manner!

1. The language options are all detailed here: http://datatables.net/usage/i18n . The one you want is http://datatables.net/usage/i18n#oLanguage.sInfo . There is a full Russian translation available here: http://www.datatables.net/plug-ins/i18n#Russian .

2. I think that following Greg's advice for the ThemeRoller support will help with this - but it is possible to constrain the table further:

[code]
div.dataTables_wrapper {
margin: 0 auto;
width: 90%;
}
[/code]
for example in your CSS.

3. See Greg's excellent answer :-)

Allan

allan

Oh one other thing - use:

[code]
@import "/demo_table_jui.css";
[/code]
(not demo_table.css).

It has a few styles which will help the layout!

Allan

afarber

Thank you, the Russian translation file and demo_table_jui.css have helped me.

The last button ("Last") is on a 2nd line, but I can live with it.

Regards
Alex

allan

div.paging_full_numbers { width: 400px } (or possibly more...) should fix that :-)

Allan

afarber

Oh ok, thank you - excellent support.

I've switched to "<< < 1 2 3 4 5 > >>" for now.

Last question if you don't mind: in the demo_table_jui.css you define:

[code]
.paginate_disabled_previous {
background-image: url('/images/back_disabled.jpg');
}

.paginate_enabled_previous {
background-image: url('/images/back_enabled.jpg');
}

.paginate_disabled_next {
background-image: url('/images/forward_disabled.jpg');
}

.paginate_enabled_next {
background-image: url('/images/forward_enabled.jpg');
}
[/code]

(I've adjusted paths for my site)

But those images seem to be unused. Or are they needed for other themes?

And do you need to include jquery-ui.min.js when using themes or not?

Thank you and have a nice weekend
Alex

allan

Those classes are using for the default pagination controls (the forward / back buttons), but are unused, as you say, in the full numbers style and thus could be deleted.

> And do you need to include jquery-ui.min.js when using themes or not?

No - there is no dependency on the jQuery UI Javascript.

Allan

GregP

You need to add the class "display" back to the table tag if you want the provided styles to all work, too. The sorting widgets at the very least look for an element matching table.display (plus a few other selectors).

kellerapps

I'm assembling a stack for a new app. I was considering extjs until I became aware of your impressive widget. Thx!

The pagination bar's buttons overlapped until I included demo_table_jui.css. This style sheet uses violet for row shading instead of my theme's colors. Is there a version which doesn't override themeroller?

allan

There isn't currently an odd / even row striping class in ThemeRoller default files, so there isn't anything to be used by DataTables. However it is trivial to specify your own using:

[code]
tr.odd { ... }
tr.even { ... }
[/code]

Allan

kellerapps

Thank you for replying.

Because I'm a programmer with minimal CSS knowledge, it would be nice to have a minimal datatables_jui.css.

You're right about odd/even. Seems to me there are several problems: 1) ThemeRoller doesn't use SASS so there's no way for widgets to inject colors, etc. into their sheets. Does the jqueryui team plan anything like this? 2) ThemeRoller's level of abstraction is too low. It should have a couple of background colors for effects like odd/even.

kellerapps

http://forum.jquery.com/topic/we-need-some-theme-ready-alternate-background-color-styles

Too bad the jqueryui CSS doesn't have some styles which just set colors such as:
ui-color-highlight
ui-color-foreground
ui-color-background