jQuery UI theming within datatables plugin

Question

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: http://i.stack.imgur.com/vbAuy.jpg

Any hint is greatly appreciated.

Answer 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.