Colvis javascript为数据表中的工具栏ui创建问题＆amp; yadcf

Question

我没有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 {
        }

Answer 1

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

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

似乎是您正在寻找的 - ＆gt;的 http://jsfiddle.net/9nph3qah/

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

非常奇怪的是，您应该知道ColVis按钮向右浮动。逻辑事物将是sDom: '<"H"lfC>tip'，但这不起作用，因为过滤器框也向右浮动，并且首先插入，因此向右移动最远（see example）

在上面的例子中，我还删除了ColVis默认的奇怪的1em margin-bottom：

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

---

<强>更新即可。正如@ user3520363指出的那样，包含页脚也是一个好主意:)完全忘记了当关注标题时。

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

更新小提琴 - ＆gt;的 http://jsfiddle.net/41has856/