Colvis javascript создает проблемы для пользовательского интерфейса панели инструментов в таблицах данных и yadcf

Question

Моя таблица без Colvis.js имеет панель инструментов, пример Live

Но с Colvis.js панель инструментов исчезает, пример Live

Использование 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 - покажите Колвису, которые отпущены прямо
<"H"> - в заголовке jQuery UI
l - Длина меню
f - Коробка фильтра (которая также всплывает справа)
затем
t - Таблица
i - Информация
p - нумерация страниц

Очень странная часть в том, что вы должны знать, что кнопка ColVis перемещается вправо. Логика вещь будет sDom: '<"H"lfC>tip' но это не работает, потому что поле фильтра также всплывает вправо, и вставляется первым, и, следовательно, получить гораздо больше вправо ( см. пример)

В приведенном выше примере я также удаляю странное поле на полях 1em, которое ColVis имеет по умолчанию:

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

---

Обновление Как указывает @user3520363, было бы неплохо также включить нижний колонтитул:) Полностью забыл об этом при фокусировке на заголовке.

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

обновленная скрипка -> http://jsfiddle.net/41has856/