Themeroller button styling

spitfire45

Is there a special trick to styling a button within a cell?

I have a submit button with the class 'ui_button' in each row but instead of being styled with the theme it is default grey. A similar button works outside of the table fine.

The styling in the basic state can be achieved by adding the UI classes 'ui-widget ui-state-default ui-corner-all ', but this doesn't help in the hover or active state!

I suspect there is a better way, and would appreciate any help.

allan

Hi spitfire45,

Could you possibly post an example showing the problem?

I've just tried the following and it appeared to style the buttons okay for me:

[code]
$(document).ready(function() {
$("button").button();

oTable = $('#example').dataTable({
"bJQueryUI": true,
"sPaginationType": "full_numbers"
});
} );
[/code]
If an example isn't possible, then perhaps just your initialisation code would provide a clue.

Regards,
Allan

spitfire45

I have

[code]$(document).ready(function() {
.
.
.

// ThemeRoller button:
$("input.ui_button").button();
.
.
.
[/code]

And the td html is:





The class is not being replaced - an identical submit button outside of the table is.

allan

Hi spitfire45,

That still looks good to me with my themed example. Are you initialising the buttons before DataTables? If you do it the other way around, then some of the buttons might not be picked up by the selector that you are using. To get around that you would need to use fnGetNodes - something a bit like this: http://datatables.net/examples/advanced_init/events_post_init.html . That's the only thing I can think of off the top of my head which would stop this.

Failing that, could you include your DataTables initialisation code as well?

Regards,
Allan

spitfire45

That sounds like the problem - I was applying the formatting by setting an extra field in the column data array when after retrieving this from the DB

$rs[$i]['view_button'] = "";

Is it just the class="ui_button" part that needs to be applied using fnGetNodes?

allan

Basically yes - something like: $("input.ui_button", oTable.fnGetNodes()).button();

Although are you using server-side processing, or client-side? If server-side processing, then you'd be best to make use of the fnDrawCallback function and run the above code.

Regards,
Allan

spitfire45

Thanks Allan,

It is server side.

What would I add to the class 'ui_button' to each button using the fnDrawCallback function?

Many Thanks,

Neil.

allan

Would something like this do what you are looking for - it will find the input.ui_button elements on each draw and make them into buttons (note that this code uses a 1.7 feature - the 'this' in the callback function):

[code]
$(document).ready( function() {
$('#example').dataTable( {
"fnDrawCallback": function() {
$("input.ui_button", this.fnGetNodes()).button();
}
} );
} );
[/code]
Regards,
Allan

spitfire45

Absolutely perfect Allan!

Thanks again

Neil