Individual column search input in thead

reimax

HI

my code:

<table class="datatables table-striped" id="datatable" data-page-length='10'>
<thead>
    <tr class="search">
            <th class="col-md-1">
                            &nbsp;
                        </th>
                        <th class="col-md-4">
                            search
                        </th>
                        <th class="col-md-2">
                            search
                        </th>
                        <th class="col-md-2">
                            search
                        </th>
                        <th class="col-md-2">
                            search
                        </th>
                        <th class="col-md-1">
                            &nbsp
                        </th>
        </tr>

                    <tr>
                        <th class="col-md-1 no_hidden">
                            &nbsp;
                        </th>
                        <th class="col-md-4 no_hidden">
                            col_name
                        </th>
                        <th class="col-md-2 no_hidden">
                           col_name
                        </th>
                        <th class="col-md-2 no_hidden">
                            col_name
                        </th>
                        <th class="col-md-2">
                           col_name
                        </th>
                        <th class="col-md-1 no_hidden">
                            &nbsp
                        </th>
                    </tr>
                </thead>

<tbody>
......
</tbody>
<tfoot>
<tr>
<th colspan="6">
filter
</th>
</tfoot>
</table>

js:

$('#datatable .search th:gt(0):lt(4)').each( function () {
        var title = $(this).text();
        $(this).html( '<div class="form-group"><input type="text" class="form-control input-sm" placeholder="'+title.trim()+'"></div>' );
    });
var table = $('#datatable').DataTable({
        pagingType: 'numbers',
        lengthChange: false,
        autoWidth: false,
        bInfo: false,
        columnDefs: [
            {
                "targets": [ 0, 5 ],
                "orderable": false
            },

            { "targets": 'no_hidden', "visible": true},
            { "targets": '_all', "visible": false},
        ],
        "order": [],
        dom: 'Bfrtip',
        colReorder: true,
        buttons: [ {
            extend: 'colvis',
            columns: ':gt(0):lt(4)',
            className: ''
        }],
        language: {
            buttons: {
                colvis: '<i class="fa fa-cog"></i>'
            }
        }
    });

table.columns().eq( 0 ).each( function ( colIdx ) {
        $( 'input', $('.search th')[colIdx] ).on( 'keyup change', function () {
            table
                .column( colIdx )
                .search( this.value )
                .draw();
        });
    });

I need to do a search in the header for each column. In all examples in the documentation search in the tfoot. Put the coll in the tfoot using

tfoot { display: table-header-group; }

Does not fit, there already have the filters I need. Is there any way to solve this question?

reimax

i found, if use

columnDefs: [
            { "targets": [1], "visible": true},
            { "targets": '_all', "visible": false},
        ],

to show or hide col, search not work. if delete columnDefs, search work.

tested single

table
        .column( 4 )
        .visible( false );

search not work. total: if use hidden col on start and search - search not work