FixedHeader not working

williammarq

Hi, i'm using datatables with some custom css to make header as search box...

Almost all functions are working, except "FixedHeader".

This is my DataTables Configs:

`$(document).ready(function() {

var table = $("#desembolsosTable").DataTable({
// ordernar a coluna com indice 0 em ordem decrescente
order: [[ 8, "asc" ]],

//adicionar suporte para nagegação pelo teclado ao clicar em uma célula
keys: true,

// habilitar reorganização de colunas com drag'n drop
colReorder: true,

// habilitar reorganização de linhas com drag'n drop
//rowReorder: true,

// tabela responsiva
responsive: true,

fixedHeader: true,

 //lengthChange: true,

 autoWidth: true,
// Desabilitar paginação dos resultados
paging:false,

//define inicializador padrão como referencia para plugins
dom: 'Bfrtip',

// habilita botões para exportar a tabela
buttons: [
    /*
  {
      // tipo para exportar
      extend: 'csv',

      // texto do botao
      text:   'CSV',

      // nome do arquivo
      title: 'payback_lista_desembolsos_projeto',
      exportOptions: {
            columns: ':visible'
        },
        className: 'btn btn-sm btn-secondary'

  },
    */
  {
    extend: 'pdf',
    text: 'PDF',
    title: 'payback_lista_desembolsos_projeto',
    exportOptions: {
          columns: ':visible'
      },
     className: 'btn btn-sm btn-secondary'
  },

  {
    extend: 'excel',
    text: 'Excel',
    title: 'payback_lista_desembolsos_projeto',
    exportOptions: {
          columns: ':visible'
      },
     className: 'btn btn-sm btn-secondary'
  },

  {
    extend: 'copy',
    text: 'Copiar',
    title: 'payback_lista_desembolsos_projeto',
    exportOptions: {
          columns: ':visible'
      },
     className: 'btn btn-sm btn-secondary'
  },

  {
    extend: 'print',
    exportOptions: {
          columns: ':visible'
      },
     className: 'btn btn-sm btn-secondary'
  },
    /*
  {
    extend: 'colvis',
    text:  'Colunas Visíveis',
    exportOptions: {
          columns: ':visible'
      },
     className: 'btn btn-sm btn-secondary'
  }
  */

]

});

$('a.toggle-vis').on( 'click', function (e) {
e.preventDefault();

// Get the column API object
var column = table.column( $(this).attr('data-column') );

// Toggle the visibility
column.visible( ! column.visible() );

} );

//table.buttons().container().appendTo( $('.botoes', table.table().container() ) );

// Setup - add a text input to each footer cell

$('.DESEMBOLSOS tfoot th').each( function (i) {
var title = $('tfoot th').eq( $(this).index() ).text();
$(this).html( '<input type="text" placeholder="Search '+title+'" data-index="'+i+'"/>' );

} );

// Filter event handler

$( table.table().container() ).on( 'keyup', 'tfoot input', function () {
table
.column( $(this).data('index') )
.search( this.value )
.draw();
} );

} );
`
I'm using this SBADMIN Bootstrap template to create my pages and datatables are loaded on right pane
https://startbootstrap.com/template-overviews/sb-admin/

I'm doing something wrong?

allan

We'd need a link to a page showing the issue please.

Allan

kthorngren

Maybe you can provide an example with the issue for debugging.
https://datatables.net/manual/tech-notes/10#How-to-provide-a-test-case

Kevin

williammarq

My source codes have a lot of internal data that i can't expose online...

But, in inspect mode
from browser, when scrolling down, i can see JavaScript changing classes from table. Seems like JS add the fixed header classes to HTML, but the header does not fix.

Look at this prints with inspect mode

kthorngren

Maybe there is a CSS conflict. That's why I suggested building a test case. The specific data doesn't matter. Its more about replicating your environment to show the issue. Building a test case might help you find the problem.

Kevin