ScrollY break the tfoot in header

pettedemon

Hi,
I add the function 'scrollY' at my table.
before there was a search for every column in the tfoot, and with the CSS style
tfoot { display: table-header-group; }

the tfoot was before the thead.
but now with the scrollY the tfoot is on the foot of the table and the CSS doesn't work.

So how can I display with the scrollY the tfoot before the thead before?
thanks

kthorngren

Why not just put your column search in the header instead of moving the footer. Here is an example:
http://live.datatables.net/giharaka/1/edit

Kevin

pettedemon

Hi,
I try this solution, but I have a problem.
before I can "hide" some column" with a simple trick, I add a class to my foot th

<th class="hide_input">Seleziona</th>

and set css

`tfoot .hide_input{

        visibility: hidden;
    }`

and I set the width of the column with
"columnDefs": [ { "orderable": false, "targets": [2,5] }, // definisco la larghezza delle colonne { "width": '30%', "targets": 0 }, { "width": '30%', "targets": 1 }, { "width": '15%', "targets": 2 }, { "width": '10%', "targets": 3 }, { "width": '10%', "targets": 4 }, { "width": '5%', "targets": 5 }, // imposto lo stile della cella //{"className": "dt-body-left", "targets": [0, 1,3]}, ],
I try to use
$('#canzoni_player thead th').each( function () { var title = $(this).text(); $(this).html( '<input type="text" placeholder="'+title+'" />' ); } );
and so
`initComplete: function() {
var api = this.api();

                        // Apply the search
                        api.columns([0, 1, 3, 4]).every(function() {
                            var that = this;

                            $('input', this.head()).on('keyup change', function() {
                                if (that.search() !== this.value) {
                                    that
                                    .search(this.value)
                                    table.columns.adjust().draw();
                                 }
                            });
                        });
                    // end the search
                    }`

but I cannot set the width of columns fixed.

If I use the code in example so
$('#example thead tr:eq(1) th').each( function () { var title = $(this).text(); $(this).html( '<input type="text" placeholder="Search '+title+'" class="column_search" />' ); } );

I cannot initialize the research with the code
`initComplete: function() {
var api = this.api();

                        // Apply the search
                        api.columns([0, 1, 3, 4]).every(function() {
                            var that = this;

                            $('input', this.head()).on('keyup change', function() {
                                if (that.search() !== this.value) {
                                    that
                                    .search(this.value)
                                    table.columns.adjust().draw();
                                 }
                            });
                        });
                    // end the search
                    `

I try to use
` // Apply the search
$( 'canzoni_player thead' ).on( 'keyup', ".column_search",function () {

    table
        .column( $(this).parent().index() )
        .search( this.value )
        .draw();
} );`

but now the search doesn't work, and I cannot set the width of column with
// definisco le colonne che non possono essere ordinate "columnDefs": [ { "orderable": false, "targets": [2,5] }, // definisco la larghezza delle colonne { "width": '30%', "targets": 0 }, { "width": '30%', "targets": 1 }, { "width": '15%', "targets": 2 }, { "width": '10%', "targets": 3 }, { "width": '10%', "targets": 4 }, { "width": '5%', "targets": 5 }, // imposto lo stile della cella //{"className": "dt-body-left", "targets": [0, 1,3]}, ],
and I cannot hide some search.
complicated?
thanks

kthorngren

Maybe you can put together a test case showing the issue.
https://datatables.net/manual/tech-notes/10#How-to-provide-a-test-case

Kevin

pettedemon

Hi,
in this case not work, the search input is on the bottom
live.datatables.net/bavofaga/1/edit?html,css,js,console,output

pettedemon

Sorry, at now it's all ok!
Thanks