数据表插件中的 jQuery UI 主题

发布于 2024-11-25 04:06:22 字数 1449 浏览 7 评论 0原文

我正在使用 jquery datatables 插件，并向表页脚添加了一些自定义 jquery-ui 按钮。要将数据表插件与 jquery-ui 主题一起使用，必须打开“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 样式的屏幕截图： https://i.sstatic.net/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:
https://i.sstatic.net/vbAuy.jpg

Any hint is greatly appreciated.

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

不可一世的女人 2024-12-02 04:06:22

我自己找到了解决方案：

如果我将“ui-widget-content”CSS 类添加到工具栏容器 div，样式就会正确应用。
为了删除该类应用的样式（边框和背景），我添加了一个更具体的 CSS 样式来删除这些样式：

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

这里使用“div.toolbar”而不是“.toolbar”很重要，否则 ui-widget-content 样式会得到应用。
现在，工具栏容器不会应用不需要的样式，并且内部的按钮可以正确获取选定的主题。

也许这对于在数据表中使用 themeroller 和自定义 jquery-ui 按钮的人很有帮助。

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.

回复收藏 0 原文