Estou tentando criar uma tabela de dados com pesquisa personalizada e visibilidade da coluna.

O que eu fiz é -

HTML

    <div class="container">
        <table id="employee-grid"  class="display" cellspacing="0" width="100%">
            <thead>
                <tr>
                    <th>Employee name</th>
                    <th>Salary</th>
                    <th>Position</th>
                    <th>City</th>
                    <th>Extension</th>
                    <th>Joining date</th>
                    <th>Age</th>
                </tr>
            </thead>
            <thead>
                <tr>
                    <td><input type="text" id="0"  class="employee-search-input"></td>
                    <td><input type="text" id="1" class="employee-search-input"></td>
                    <td><input type="text" id="2" class="employee-search-input" ></td>
                    <td><input type="text" id="3" class="employee-search-input" ></td>
                    <td><input type="text" id="4" class="employee-search-input" ></td>
                    <td  valign="middle"><input  readonly="readonly" type="text" id="5" class="employee-search-input datepicker" ></td>
                    <td><input type="text" id="6" class="employee-search-input" ></td>
                </tr>
            </thead>
        </table>
    </div>

JS

$(document).ready(function()
{
var dataTable =  $('#employee-grid').DataTable(
{
    processing: true,
    serverSide: true,
    //ajax: "employee-grid-data.php", // json datasource for AJAX Data

    "ajax":
    {
        "url": "employee-grid-data.php",
        //"type": 'POST',
        "data": function ( d )              //Sending Custom Data for manupulating with elements out of the table
                {
                    d.myKey = "myValue";
                    // d.custom = $('#myInput').val();
                    // etc
                },
    },

    //"pagingType": "full_numbers", //Adding Last and First in Pagination
    stateSave: true,
    "language":{                    //Custom Message Setting
                    "lengthMenu": "Display _MENU_ records per page",    //Customizing menu Text
                    "zeroRecords": "Nothing found - sorry",             //Customizing zero record text - filtered
                    "info": "Showing page _PAGE_ of _PAGES_",           //Customizing showing record no
                    "infoEmpty": "No records available",                //Customizing zero record message - base
                    "infoFiltered": "(filtered from _MAX_ total records)"   //Customizing filtered message
                },
    "lengthMenu": [[5, 10, 25, 50, -1], [5, 10, 25, 50, "All"]],        //For customizing number of data sets per page

    dom: 'l<"toolbar"> Bfrtip',     //"Bfrtip" is for column visiblity - B F and R become visible

    initComplete:   function()  //Adding Custom button in Tools
                    {
                        $("div.toolbar").html('<button type="button" onclick="addNewEntry()">Add a New Record</button>');
                    },
    buttons:    [                   //Column Visiblity Buttons
                    {
                        extend: 'colvis',
                        collectionLayout: 'fixed three-column',
                        postfixButtons: [ 'colvisRestore' ]
                    }
                ],
});
});

Eu estou entendendo isso-

Funciona bem, mas existe um problema se estou tentando dobrar qualquer coluna com ele. Estou recebendo algo parecido.

Portanto, os filtros de coluna da tabela não serão ocultados quando outros itens estiverem ocultos.