jQuery UI主题在datatables插件中(jQuery UI theming within datatables plugin)

 我正在使用jquery datatables插件并在表格页脚中添加了一些自定义jquery-ui按钮。 要使用带有jquery-ui的datatables插件，必须打开“bJQueryUI”选项。 
 
 到目前为止没有问题，但现在我将jquery-ui themeroller添加到了我的页面。 
 
 当我更改主题时，所有jquery-ui组件都会相应地更改其样式，就像数据表一样，除了数据表中的按钮。 
 
 我发现它实际上是一个css优先级问题：themeroller应用的新样式的优先级低于原始样式，因此这些按钮永远不会改变它们的外观。 
 
 由于jquery-ui组件和datatables插件都很受欢迎，我以为我会找到有类似问题的人，但到目前为止没有运气... 
 
 这就是如何完成数据表的初始化和自定义按钮的创建： 
 
<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>
 
 这是实际html结构和应用的css样式的屏幕截图： http ： //i.stack.imgur.com/vbAuy.jpg 
 
 非常感谢任何提示。 

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.

原文：https://stackoverflow.com/questions/6728393