dataTable columnFilter can't work when I hide some column

wangliyao518

my previous code like below, each column can filter noramlly, but after I add hide column feature, the filter function can't work, any one know how to solve this problem, thanks in advance!

$('#results_table').dataTable({"iDisplayLength": 100}).columnFilter({ sPlaceHolder: "head:after",
                                             aoColumns: [
                                                            null,
                                                                   { type: "text" },
                                                                           { type: "text" },
                                                                           { type: "text" },
                                                                          { type: "text" },
                                                ] 
});

<table id="results_table"  style="width:100%;table-layout:fixed;">
    <thead>
            <tr>
                    <th style="width:1px;"></th>
                    <th>QC Instance ID</th>
                    <th style="width:100px;">Case Name</th>
                    <th>Owner</th>
                    <th>Team</th>
                            </tr>

// the below code is I added for hide some column

$('.toggle-vis').each(function (i){
        var column = table.column($(this).attr('data-column'));
         if( ( $(this).is(':checked') ) ){
                column.visible(true);}
            else{
                column.visible(false);
            }
    }); 

    $('.toggle-vis').on('change', function (e) {
           e.preventDefault();
           // console.log($(this).attr('data-column'));
           var column = table.column($(this).attr('data-column'));
        //    console.log(($(this).is(':checked')))
           if( ( $(this).is(':checked') ) ){
                column.visible(true);}
            else{
                column.visible(false);
            }
           // column.visible(!column.visible())

       });

$('a.toggle-vis').on( 'click', function (e) {
    e.preventDefault();

    // Get the column API object
    var column = table.column( $(this).attr('data-column') );

    // Toggle the visibility
    column.visible( ! column.visible() );
} );
} );

$(function(){
$("#select_all_col_filters").click(function(){
if( ( $(this).is(':checked') ) ){
// console.log("checked!!")
$('.toggle-vis').each(function (i) {
// console.log($(this).is(':checked'));
if ( !$(this).is(':checked')) {
$(this).click();}
})

}
   else{
    $('.toggle-vis').each(function (i) {
        // console.log($(this).is(':checked'));
        if ( $(this).is(':checked')) {
        $(this).click();}          
   })

}

});})

colin

We're happy to take a look, but as per the forum rules, please link to a test case - a test case that replicates the issue will ensure you'll get a quick and accurate response. Information on how to create a test case (if you aren't able to link to the page you are working on) is available here.

Cheers,

Colin