Fixed header and footer not working

mmcnair80

I've tried several things to try and figure out what is happening. On the first draw, the fixed header and footer don't work. Then on the next draw it does, except that it adds a second footer to the top of the table, under the fixed header, and the search boxes there don't work. The search boxes that are actually in the footer do work no matter the draw number.

It's on the even numbered draws that the header and footer are fixed and on the odd draws that they are not.

Here's how I'm initializing the DataTable:

<script type="text/javascript" class="init">
    $(document).ready(function () {
    
        // Setup - add a text input to each footer cell
        $('#DataTable tfoot th').each(function () {
            var title = $(this).text();
            $(this).html('<input type="text" placeholder="Search ' + title + '" />');
        });

        var table = $('#DataTable').DataTable({
                "lengthMenu" : [[25, 50, 75, 100, 150], [25, 50, 75, 100, 150]],
                "dom" : '<"top"Bilp<"clear">>rt<"bottom"ip<"clear">>',
                "buttons" : [{
                        extend : 'collection',
                        text : 'Selection',
                        buttons : ['selectAll', 'selectNone']
                    }, {
                        extend : 'collection',
                        text : 'Export',
                        buttons : ['excel', 'csv', 'pdf']
                    }
                ],
                "fixedHeader" : {
                    header : true,
                    footer : true
                },
                "select" : true,
                "processing" : true,
                "serverSide" : true,
                "ajax" : {
                    "url" : "./ServerSide.php",
                    "type": "POST"
                },
        initComplete: function() {
          var api = this.api();

          // Apply the search
          api.columns().every(function() {
            var that = this;

            $('input', this.footer()).on('keyup change', function() {
              if (that.search() !== this.value) {
                that
                  .search(this.value)
                  .draw();
              }
            });
          });
        }
      });
    });
</script>

mmcnair80

I found the error in my code. It was actually in my CSS not in the jquery. I had this line:

tfoot{
    display:  table-header-group;
}

Once I commented this out it started working correctly.

kanchanb

But I want both search filter at the top and fixedHeader what I supposed to do

kthorngren

I want both search filter at the top and fixedHeader what I supposed to do

There aren't any problems I know of using FixedHeader and column search in the header. What have you tried and what is not working?

Kevin