search input at columns header don't work for fixed columns

samirgj

Hi:

I'm trying to put the search inputs at column headers, but when i try this, it doesn't work to fixed columns.

My code is:

//Here init Table
function InicializarTabla() {

    var table = jQuery('#tabla').DataTable({

        scrollY: "300px",
        scrollX: true,
        scrollCollapse: true,
        paging: false,
        fixedColumns: {
            leftColumns: 2,
            rightColumns: 0
        },
        "ordering": false,
        "info": false,
        "searching": true,
        dom: 'frtip',
        buttons: [
            'excelHtml5',
            {
            // Here i will create a extra button with the zip
            }
        ],
        initComplete: function () {

            var api = this.api();

            api.columns().every(function () {

                var that = this;
                jQuery('input', this.footer()).on('change', function () {
                    if (that.search() !== this.value) {
                        that
                          .search(this.value)
                          .draw();
                    }
                });
            });

            //this don't work
            //jQuery('tfoot').each(function () {
            //    this.style.setProperty('display', 'table-header-group', 'important');
            //});
        }
    });
}

// Here i move
jQuery('#tabla tfoot tr').appendTo('#tabla thead');

// here change where to search
jQuery('input', this.header()).on('change', function () {
...
}

Finally, the colour of the header of fixed colmns have other backgroud colour as you can see at picture.

Thanks.

bindrid

```
//this don't work

        jQuery('tfoot').each(function () {

            this.style.setProperty('display', 'table-header-group', 'important');

        });

should be 

        jQuery('tfoot').addClass("display table-header-group");

```
though "display" should already be in your table class tag.
Important is applied to specific attributes in your css class definition. Also, it should be used sparingly

Now having said all of that, you should not have to add any classes to the footer unless you are purposely overriding the footer classes already applied by DataTable.

samirgj

As i wrote, that don't work.

for that reason i put:

// Here i move
jQuery('#tabla tfoot tr').appendTo('#tabla thead');
 
// here change where to search
jQuery('input', this.header()).on('change', function () {
...
}

And it works, but only with the not fixed columns as i already said.

aakirichuk

just, put your input width tag <br> in table tag <th>

$('#example thead th').each( function (i,e){
var title = $(this).text();
if(i==0){
$(this).append( svg_list+'<br>'+svg_trash );
$(this).attr('id','allTD');
}
else{
$(this).html('<input type="text" disabled class ="th_title" value = "'+designe_data(title)+'" " /><br><input type="text" class = "findInput" placeholder="Поиск '+title+'" />');
}
});