javascript - Colvis javascript 在数据表和 yadcf 中为工具栏 ui 创建问题

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'

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

C - 显示向右浮动的 Colvis
<"H"> - 在 jQuery UI 标题中显示
l - 长度菜单
f - 过滤框(也向右浮动)
然后
t - table
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>'

更新 fiddle -> http://jsfiddle.net/41has856/