1

I'm using the jquery datatables plugin and added some custom jquery-ui buttons to the table footer. To use the datatables plugin with jquery-ui theming the "bJQueryUI" option has to be turned on.

So far no problem, but now I added the jquery-ui themeroller to my page.

When I change the theme, all the jquery-ui components change their style accordingly, just like the datatable, except for the buttons within the datatable.

I found out that it actually is a css-priority issue: the new styles applied by the themeroller got lower priority than the original styles, so these buttons never change their look.

As the jquery-ui components and the datatables plugin both are quite popular I thought I would find someone with similar problems, but had no luck so far..

That's how the initialization of the datatable and the creation of the custom buttons are done:

<table id="DataTable">
// ...
</table>
<script type="text/javascript">
    $(function ()
    {
        var oDataTable = $('#DataTable').dataTable({
            "aaData": result.aaData,
            "bPaginate": false,
            "bJQueryUI": true,
            "bInfo": true,
            "sDom": '<"fg-toolbar ui-toolbar ui-widget-header ui-corner-tl ui-corner-tr ui-helper-clearfix"lfr>t<"fg-toolbar ui-toolbar ui-widget-header ui-corner-bl ui-corner-br ui-helper-clearfix"ipT<"toolbar">>',
            "oTableTools":
            {
                "sRowSelect": "single"
            }
        });
        // add buttons
        $("div.toolbar").html('<button id="AddButton">New element</button>');
        $("#AddButton").button().click(function () { /* ... */ });
        // add more buttons...
    }
</script>

Here's a screenshot of the actual html structure and applied css-styles: https://i.stack.imgur.com/vbAuy.jpg

Any hint is greatly appreciated.

Gigo
  • 3,188
  • 3
  • 29
  • 40
  • Is it the "bJQueryUI" that is styling the buttons, and overriding the jQuery UI theme? – b01 Jul 18 '11 at 03:45

3 Answers3

1

I found the solution myself:

If I add the "ui-widget-content" CSS-class to the toolbar-container div, the styles get applied correctly. To remove the styles which that class applies (border and background), I added a more specific CSS style to remove these:

div.toolbar
{
    float: right;
    border: 0;
    background: 0;
}

It's important here to use "div.toolbar" not ".toolbar", otherwise the ui-widget-content styles get applied. Now the toolbar container doesnt get unwanted styles applied and the buttons inside correctly get the selected theme.

Maybe that's helpful for someone using the themeroller with custom jquery-ui buttons in datatables.

Gigo
  • 3,188
  • 3
  • 29
  • 40
0

IF you want the theme to control the style of the button, then comment out the CSS that is overriding the theme roller style.

If they are themed buttons, then you will have to remove your CSS to allow the theme to take affect. Themes are made to be easily over-writable so you can add customization, only it sounds like you no longer want the customization.

b01
  • 4,076
  • 2
  • 30
  • 30
  • The CSS that is overriding the theme roller style is the original theme. If I comment that out, the page gets screwed up. I didn't change any of the styles, they're all jquery-ui standard. – Gigo Jul 18 '11 at 14:51
  • Can i change the texts `Records Per Page` to only records in datatables plugin. and can I place a `Placeholder` in the `search` text field rather than a 'lable' search. – Sarfraz Ahmad Dec 05 '13 at 06:28
  • The search option is right aligned in datatables. can I change the align of search text box to left align on a particular page? – Sarfraz Ahmad Dec 05 '13 at 06:50
0

Not sure if you had this problem but there are two separate css classes with datatables. Which one to use depends on if you have bJQueryUI:true or bJQueryUI:false

bmoran
  • 1,499
  • 2
  • 13
  • 21