jQuery Datatables ColVis, ColumnFilter - hide column troubles
<p>iam using Datatables with ColVis extension and ColumnFilter together at server-side mode. When I hide a column, filtering works properly, but only until refresh the page. After the refresh page, the column is still hidden (that's okay because bStateSave=true), but the column filters are all visible (including the filter for a column that is hidden), so filtering does not work properly. For example, the ID column filters NAME column which is the column next. </p>

<p>Can You help me?</p>

<ul>
<li>DataTables - Version: 1.10.7</li>
<li>jquery.dataTables.columnFilter.js - Version: 1.6.1</li>
<li>ColVis - Version: 1.1.2</li>
</ul>

<p>Datatables filter</p>

<pre><code>//filtering
    oIncidentsTable.columnFilter({
        sPlaceHolder: "head:after",
        "aoColumns": [
                         { "type": "number" },
                         null,
                         { "type": "text" },
                         { "type": "text" },
                         { "type": "text" },
                         { "type": "text" },
                         { "type": "select", values: ['Nový', 'Rozpracovaný', 'Vyřešený'] },
                         { "type": "text" },
                         null
        ],
        bUseColVis: true
    });
</code></pre>

<p>Table HTML</p>

<pre><code>&lt;!--Table HTML--&gt;
&lt;div id="example2_wrapper" class="dataTables_wrapper form-inline dt-bootstrap"&gt;
    &lt;div class="col-sm-12"&gt;
        &lt;table id="TableIncident" class="table table-bordered table-hover dataTable table-striped" role="grid" style="cursor:pointer" aria-describedby="example2_info"&gt;
            &lt;thead&gt;
                &lt;tr&gt;
                    &lt;th&gt;&lt;/th&gt;
                    &lt;th&gt;&lt;/th&gt;
                    &lt;th&gt;&lt;/th&gt;
                    &lt;th&gt;&lt;/th&gt;
                    &lt;th&gt;&lt;/th&gt;
                    &lt;th&gt;&lt;/th&gt;
                    &lt;th&gt;&lt;/th&gt;
                    &lt;th&gt;&lt;/th&gt;
                    &lt;th&gt;&lt;/th&gt;
                &lt;/tr&gt;
                &lt;tr&gt;
                    &lt;th&gt;Id&lt;/th&gt;
                    &lt;th&gt;Registrace&lt;/th&gt;
                    &lt;th&gt;Uživatel Win&lt;/th&gt;
                    &lt;th&gt;Uživatel FE&lt;/th&gt;
                    &lt;th&gt;Stanice&lt;/th&gt;
                    &lt;th&gt;Text&lt;/th&gt;
                    &lt;th&gt;Stav&lt;/th&gt;
                    &lt;th&gt;Řešitel&lt;/th&gt;
                    &lt;th&gt;Urgentni&lt;/th&gt;
                &lt;/tr&gt;
            &lt;/thead&gt;
            &lt;tbody&gt;&lt;/tbody&gt;
            &lt;tfoot&gt;
            &lt;/tfoot&gt;
        &lt;/table&gt;
    &lt;/div&gt;
&lt;/div&gt;
</code></pre>

<p>DataTable</p>

<pre><code> var oIncidentsTable = $('#TableIncident').dataTable({
        "paging": true,
        "lengthChange": true,
        "iDisplayLength": 10,
        "info": true,
        "autoWidth": false,
        "bServerSide": true,
        "bStateSave": true,
        "sAjaxSource": "Home/AjaxHandler",
        "bProcessing": true,
        "ordering": true,
        "order": [[0, "desc"]],
        "fnServerParams": function (aoData) {
            aoData.push(
                { "name": "CHBsolved", "value": $("#CHBSolved").is(":checked") ? "true" : "false" },
                { "name": "CHBMyInc", "value": $("#CHBMyInc").is(":checked") ? "true" : "false" },
                { "name": "CHBNew", "value": $("#CHBNew").is(":checked") ? "true" : "false" });
        },
        "aoColumns": [
                        { "sName": "Id", "mDataProp": "id", "sWidth": "5%" },
                        { "sName": "Registrace", "mDataProp": "dateTime", "sWidth": "7%" },
                        { "sName": "UzivatelWin", "mDataProp": "UserWindows", "sWidth": "12%" },
                        { "sName": "UzivatelFE", "mDataProp": "userFE", "sWidth": "12%" },
                        { "sName": "Stanice", "mDataProp": "computer", "sWidth": "8%" },
                        { "sName": "Text", "mDataProp": "text", "sWidth": "25%" },
                        { "sName": "Stav", "mDataProp": "status", "sWidth": "5%" },
                        { "sName": "Resitel", "mDataProp": "solver", "sWidth": "12%" },
                        { "sName": "Urgentni", "mDataProp": "importance", "sWidth": "5%" }
        ],
        "createdRow": function (row, data, index) {
            if (data[6] == "Nový") {
                $('td', row).eq(6).addClass('highlight');
            }
        },
        dom:
            "&lt;'#TableControls.row'&lt;'pull-left'l&gt;&lt;'pull-right'CBR&gt;&gt;" +
            "&lt;'row'&lt;'col-sm-12'tr&gt;&gt;" +
            "&lt;'row'&lt;'col-sm-5'i&gt;&lt;'col-sm-7'p&gt;&gt;",
        buttons: [
            {
                extend: 'print',
                text: '&lt;i class="fa fa-print"&gt;&lt;/i&gt;',
                exportOptions: {
                    columns: ':visible'
                }
            },
            {
                extend: 'excelHtml5',
                text: '&lt;i class="fa fa-file-excel-o"&gt;&lt;/i&gt;',
                titleAttr: 'Excel',
                exportOptions: {
                    columns: ':visible'
                }
            },
            {
                extend: 'pdfHtml5',
                text: '&lt;i class="fa fa-file-pdf-o"&gt;&lt;/i&gt;',
                exportOptions: {
                    columns: ':visible'
                }
            }
        ],
        "colVis": {
            "buttonText": "Zobrazit sloupce"
            //activate: "mouseover"
        },
        "language": {
            "lengthMenu": "Záznamů na stránku _MENU_",
            "zeroRecords": "Nebyly nalazeny žádné záznamy",
            "info": "Stránka _PAGE_ z _PAGES_",
            "infoEmpty": "Tabulka neobsahuje žádné záznamy",
            "infoFiltered": "(- vyfiltrovano z _MAX_ záznamů)",
            "sSearch": "Prohledat všechny sloupce:",
            "processing": "&lt;div class='dataTables_processing'&gt;&lt;i class='fa fa-spinner fa-spin fa-2x'&gt;&lt;/i&gt;NAČÍTÁM...&lt;/div&gt;",
            "paginate": {
                "first": "První",
                "last": "Poslední",
                "next": "Další",
                "previous": "Předchozí"
            }
        },
        //obarveni radku, ktere maji vyssi dulezitosts
        "fnRowCallback": function (nRow, aData, iDisplayIndex, iDisplayIndexFull) {
            if (aData["importance"] == 'True') {
                $(nRow).addClass('danger');
            }
        }
    });
</code></pre>