Search code examples
javascriptcssdatatablesyadcf

Colvis javascript create problems for toolbar ui in datatables & yadcf

My table without Colvis.js have toolbar, Live Example

toolbar

But with Colvis.js toolbar disappears, Live Example

enter image description here

Using Firebug seems to be a conflict with jquery-ui but I don't understand well what exact happens.
Is a css problem or a javascript conflict?
However this is relevant css for toolbar

<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 {
        }
Solution

  • jQuery dataTables sDom / dom is not very logic. You are right, it has to do with jQuery UI - you miss the H flag, which stands for jQueryUI theme "header" classes. 

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

    seems to be what you are looking for -> http://jsfiddle.net/9nph3qah/

    C - show Colvis, which are floated right
    <"H"> - in jQuery UI header show
    l - Length menu
    f - Filter box (which also is floated right)
    then
    t - Table
    i - Information
    p - Pagination

    The very weird part is that you are expected to know that the ColVis button is floated to the right. The logic thing would be sDom: '<"H"lfC>tip' but this does not work, because the filter box also is floated to the right, and inserted first, and therefore get far most to the right (see example)

    In the above example I also remove the strange 1em margin-bottom the ColVis has by default :

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

    Update. As @user3520363 points out, it is a good idea to include the footer too :) Completely forgot that when focusing on the header. 

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

    updated fiddle -> http://jsfiddle.net/41has856/