CODEWITHSUNDEEP
jquery-uidatatablesthemeroller
Gigo
Gigo

Reputation: 3264

jQuery UI theming within datatables plugin

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.sstatic.net/vbAuy.jpg

Any hint is greatly appreciated.

Upvotes: 1

Views: 10766

Answers (3)

Gigo
Gigo

Reputation: 3264

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.

Upvotes: 1

bmoran
bmoran

Reputation: 1529

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

Upvotes: 0

b01
b01

Reputation: 4384

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.

Upvotes: 0

Related Questions