Replacing graphics for sPageJUINext and Prev

bgardner

I searched through to see if there was a way to override the graphics used from jQuery UI for the next and previous arrows. For some reason my client thinks that the right-left arrows are not as intuitive as up-down. From a jQuery UI standpoint, that's no big deal, as there is a north-south as well as east-west icons provided. The deal is, I would rather not replace the dataTables.js code below, so how do I override this in my code or style?

[code]
_oExt.oJUIClasses = {
...
"sPageJUINext": "ui-icon ui-icon-circle-arrow-e",
"sPageJUIPrev": "ui-icon ui-icon-circle-arrow-w",
...
}
[/code]

I appreciate your help,
Brian

allan

Hi Brian,

You know what - I hadn't actually considered using up down arrows... I can certainly see that it could conceptually be seen as either way!

It looks like you are half way there to the solution - this is certainly the right bit of code in DataTables, but there is no need to change it in the core file. The classes that DataTables uses are exposed through the jQuery object, and it's quite easy to change them: http://datatables.net/styling/custom_classes

So in this case you would need:

[code]
$.fn.dataTableExt.oJUIClasses.sPageJUINext = "ui-icon ui-icon-circle-arrow-s";
[/code]
etc, just before you initialise your table.

Regards,
Allan

bgardner

Allan,

I just got around to this, and it worked great. Thanks again for all your help.

Brian

meoshaugh

I like the non-jquery buttons. ../images/back_disabled.jpg for example. Is there a way to use them? Not sure where to put the enabled/disabled ones. Do they have to be the themeroller ui ones? (I like the jquery ui for everything else).