ScrollY break the tfoot in header

ScrollY break the tfoot in header

pettedemonpettedemon Posts: 38Questions: 6Answers: 0

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

This question has an accepted answers - jump to answer

Answers

  • kthorngrenkthorngren Posts: 20,142Questions: 26Answers: 4,736
    Answer ✓

    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

  • pettedemonpettedemon Posts: 38Questions: 6Answers: 0
    edited July 2018

    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

  • kthorngrenkthorngren Posts: 20,142Questions: 26Answers: 4,736

    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

  • pettedemonpettedemon Posts: 38Questions: 6Answers: 0

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

  • pettedemonpettedemon Posts: 38Questions: 6Answers: 0

    Sorry, at now it's all ok!
    Thanks

This discussion has been closed.