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

Question

我的table没有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 header 显示
l - 长度菜单
f - 过滤框（也向右浮动）
然后
t - Table
i - 信息
p - 分页

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

在上面的示例中，我还删除了 ColVis 默认具有的奇怪的 1em margin-bottom :

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

更新。正如@user3520363 指出的那样，也包含页脚是个好主意 :) 在关注 header 时完全忘记了这一点。

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

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

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

Colvis javascript create problems for toolbar ui in datatables & yadcf

javascript

css

datatables

yadcf