javascript - Colvis JavaScript在DataTables和Yadcf中为工具栏UI创建问题

我没有Colvis.js的表格有工具栏Live Example



但是，随着Colvis.js工具栏消失，Live Example



使用Firebug似乎与jquery-ui发生冲突，但我不太了解确切发生了什么。是CSS问题还是JavaScript冲突？
但这与工具栏的相关CSS

<div class="fg-toolbar ui-toolbar ui-widget-header ui-corner-tl ui-corner-tr ui-helper-clearfix">

。

.ui-helper-clearfix::before, .ui-helper-clearfix::after {
            content: "";
            display: table;
        }
        .ui-helper-clearfix::after {
            clear: both;
        }
        .ui-helper-clearfix::before, .ui-helper-clearfix::after {
            content: "";
            display: table;
        }
        .ui-corner-all, .ui-corner-top, .ui-corner-right, .ui-corner-tr {
            border-top-right-radius: 4px;
        }
        .ui-corner-all, .ui-corner-top, .ui-corner-left, .ui-corner-tl {
            border-top-left-radius: 4px;
        }
        .ui-widget-header {
            background: url("images/ui-bg_highlight-soft_75_cccccc_1x100.png") repeat-x scroll 50% 50% #cccccc;
            border: 1px solid #aaaaaa;
            color: #222222;
            font-weight: bold;
        }
        .ui-helper-clearfix {
        }

最佳答案

jQuery dataTables sDom / dom不是很合逻辑。没错，这与jQuery UI有关-您错过了H标志，它代表jQueryUI theme "header" classes。

sDom: 'C<"H"lf>tip'

似乎是您要寻找的-> http://jsfiddle.net/9nph3qah/

C-显示上浮的Colvis
<"H">-在jQuery UI标头中显示
l-长度菜单
f-过滤器框（也向右浮动）
然后
t-表格
i-信息
p-分页

最奇怪的部分是您应该知道ColVis按钮浮动在右侧。逻辑上的内容是sDom: '<"H"lfC>tip'，但这是行不通的，因为过滤器框也浮动在右侧，并且首先插入，因此最靠右侧（see example）

在上面的示例中，我还删除了ColVis默认具有的奇怪的1em边距底部：

div.ColVis {
    margin-bottom: 0px;
}

更新。正如@ user3520363指出的那样，最好也包含页脚:)完全忘记在关注页眉时的想法。

sDom: 'C<"H"lf>t<"F"ip>'

更新小提琴-> http://jsfiddle.net/41has856/

关于javascript - Colvis JavaScript在DataTables和Yadcf中为工具栏UI创建问题，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/29303787/