3

Estou usando em um sistema o bootstrap, datatables e fixedHeader, estou com três problemas:

  1. Eu precisaria que o cabeçalho (thead) da tabela parasse antes do final do menu, ficasse abaixo do menu, ele está parando no topo da página, tem como fazer isso?

  2. Quando abro o dialog (clicando no link de cada linha no final) o thead fica por traz do dialog, mas é o único elemento que não fica por traz do modal (acho que é isso);

  3. Quando clico em um menu, os items do sub-menu também ficam por de traz do thead;

O HTML, não gostaria de deixar aqui, por ser um tanto quanto extenso, mas se for o caso, eu até coloco;

O JS para fazer isso é esse

var oTable = $('#example').dataTable({
    "paging": false,
    "info": false
});

new $.fn.dataTable.FixedHeader( oTable, {
  "zTop": "1035"
});

Segue os códigos aqui http://jsbin.com/regetiyaki/1/edit?html,css,js

E aqui já rodando o exemplo http://jsbin.com/regetiyaki/1/

PS: No momento estou com a versão 3.0.0 do bootstrap e não posso atualizar para a versão atual, no caso, 3.3.5, eu fiz esse teste e no caso solucionaria a minha questão 2, mas infelizmente não tenho como fazer essa atualização.

Segue um print dos erros, ai já da para perceber que o thead fica por cima do menu (no topo da página) e não fica por de traz do modal.

inserir a descrição da imagem aqui

1 Resposta 1

2

Marcelo,

Você pode usar o offsetTop para fazer isso, exemplo:

    var oTable = $('#example').dataTable({
        "paging": false,
        "info": false
    });

    new $.fn.dataTable.FixedHeader(oTable, {
        "offsetTop": 50
    });

Exemplo funcionando: JSFIDDLE

8
  • Essa foi minha primeira tentativa, mas como é uma tabela com muitas colunas ficou tudo desconfigurado, em alguns casos eu estou usando dessa maneiro, mais simples mesmo e um plugin a menos, mas tem alguns casos que irei ter que usar o FixedHeader mesmo. Commented 7/07/2015 às 17:25
  • Entendi, eu estou usando desta forma, da forma que você esta fazendo se você mudar o "zTop" para 1030 não irá aparecer o problema n° 2 Commented 7/07/2015 às 17:56
  • 2
    voce pode diminuir o zTop para 1020 ou remove-lo que que todas as questões ficam resolvidas Commented 7/07/2015 às 23:31
  • 1
    minha primeira ideia em resolver o problema foi usando o scroll, depois que testei o offsetTop vi que so precisaria dele para resolução de todas as duvidas do Marcelo, reeditarei com apenas aquilo que foi necessario para resolução do problema, obrigado Jorge. Commented 8/07/2015 às 16:10
  • 1
    @MarceloDiniz Rejeitei a edição, pois acredito que neste caso o autor deva editar e adicionar o "zTop": "1020",, mesmo estando comentado, talvez o zTop seja algo que funcionou pra ti, mas também pode ser o uso do html que afetou o Z, e neste caso o zTop só funcionaria pra ti. Recomendo que comente ao autor da resposta solicitando que ele adicione este trecho ao código, se ele achar que faz parte da resposta então OK, se não então o comentário dele deve bastar como "ajuda" para o seu problema. :)
    – Syzoth
    Commented 8/07/2015 às 17:46

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .