1

我正在使用 jquery datatables 插件并向表页脚添加一些自定义 jquery-ui 按钮。要使用带有 jquery-ui 主题的数据表插件，必须打开“bJQueryUI”选项。

到目前为止没问题，但现在我将 jquery-ui 主题滚轮添加到我的页面中。

当我更改主题时，所有 jquery-ui 组件都会相应地更改其样式，就像数据表一样，除了数据表中的按钮。

我发现这实际上是一个 css 优先级问题：themeroller 应用的新样式的优先级低于原始样式，因此这些按钮永远不会改变它们的外观。

由于 jquery-ui 组件和数据表插件都非常受欢迎，我想我会找到有类似问题的人，但到目前为止还没有运气..

这就是数据表的初始化和自定义按钮的创建完成的方式：

<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

非常感谢任何提示。

4

3 回答 3

1

我自己找到了解决方案：

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.

于 2014-06-17T23:02:32.007 回答
0

如果您希望主题控制按钮的样式，则注释掉覆盖主题滚轮样式的 CSS。

如果它们是主题按钮，那么您将不得不删除您的 CSS 以使主题生效。主题易于覆盖，因此您可以添加自定义，只是听起来您不再需要自定义。

于 2011-07-18T03:43:13.497 回答
0

不确定您是否遇到此问题，但有两个带有数据表的单独 css 类。使用哪一个取决于您是否有 bJQueryUI:true 或 bJQueryUI:false

于 2011-11-09T18:03:45.313 回答