direction support (rtl, ltr)

msp5

Hello,

I didn't find anything about direction support in your documentation. So do you support direction or not?
If not
1. Do you have an approach to do that? If yes then when?
2. Help me plz how can I do that manually?

Best Regards,
Mossy

allan

This is more of a question about CSS and the abilities of the web-browser rather than DataTables itself I think. DataTables can be fully internationalised by changing the language strings, but changing the text direction should be done with CSS: http://www.w3schools.com/css/pr_text_direction.asp .

Allan

msp5

Thanks for your reply allan,

But some JQuery plugins like JsTree because of their implementation have limitations on direction, so developers have added the direction Option in their API.

I just wanted to know, Hasn't your DataTables any problem after changing the direction of page or it needs to modify some it's base css or js files?

Regards,
Mossy

allan

I'm not aware of any issues at this time, but then it's not something that I've tried myself. It will almost certainly require some CSS modification as I noted, but hopefully that should be straight forward enough.

If you do run into any issues, please do let us know.

Allan

dannyb

Hi Allan and everybody else
Thanks for the great plugins. Started working with them now, and they are SO helpful!

This is my first project with JQuery, so please forgive me if I am asking stupid questions. I try not to...

CSS rtl did not do it for me. DataTables works fine, but KeyTable goes ltr. I switched the left and right arrow cases in the KeyTable.js file, and it works like a charm - but I know it is not the right way. :) Any other suggestions?

Thanks again
Danny

GregP

In terms of pure CSS, Chrome (and probably webkit in general) does not have proper support for RTL.

dannyb

Thanks, Greg.
I didn't know that. Anyway, it didn't work on my IE8 either.

GregP

Drives me a bit nutty sometimes. For a long time, it was Firefox killing me with lack of "text-overflow: ellipsis" support. If it's not one browser, it's another. The sort of "edge" CSS properties always seem to be wonky or missing in at least one browser. :-/

golan

/*
* RTL support
*/
.dataTables_wrapper {
direction: rtl;
}
.dataTables_length {
float: right;
}
.dataTables_filter {
float: left;
text-align: left;
}
#DataTables_Table_0_last {
-moz-border-radius-bottomright: 0px;
-webkit-border-bottom-right-radius: 0px;
-khtml-border-bottom-right-radius: 0px;
border-bottom-right-radius: 0px;

-moz-border-radius-topright: 0px;
-webkit-border-top-right-radius: 0px;
-khtml-border-top-right-radius: 0px;
border-top-right-radius: 0px;

-moz-border-radius-bottomleft: 6px;
-webkit-border-bottom-left-radius: 6px;
-khtml-border-bottom-left-radius: 6px;
border-bottom-left-radius: 6px;

-moz-border-radius-topleft: 6px;
-webkit-border-top-left-radius: 6px;
-khtml-border-top-left-radius: 6px;
border-top-left-radius: 6px;
}
#DataTables_Table_0_first {
-moz-border-radius-bottomright: 6px;
-webkit-border-bottom-right-radius: 6px;
-khtml-border-bottom-right-radius: 6px;
border-bottom-right-radius: 6px;

-moz-border-radius-topright: 6px;
-webkit-border-top-right-radius: 6px;
-khtml-border-top-right-radius: 6px;
border-top-right-radius: 6px;

-moz-border-radius-bottomleft: 0px;
-webkit-border-bottom-left-radius: 0px;
-khtml-border-bottom-left-radius: 0px;
border-bottom-left-radius: 0px;

-moz-border-radius-topleft: 0px;
-webkit-border-top-left-radius: 0px;
-khtml-border-top-left-radius: 0px;
border-top-left-radius: 0px;
}
.dataTables_info {
float: right;
}
.dataTables_paginate {
float: left;
text-align: left;
}

allan

Nice one - thank you for sharing with us!

Allan