jQuery DataTables: largura da tabela de controle


98

Tenho um problema para controlar a largura de uma tabela usando o plugin jQuery DataTables. A mesa deve ter 100% da largura do contêiner, mas acaba tendo uma largura arbitrária, ao invés da largura do contêiner.

Sugestões apreciadas

A declaração da tabela se parece com isto

<table id="querytableDatasets" class="display" cellspacing="0"
cellpadding="3"     width="100%">

E o javascript

jQuery('#tab-datasets').load('/cgi-bin/qryDatasets', '', function (){  
    jQuery('#querytableDatasets').dataTable({  
        "bPaginate": false,  
        "bInfo": false,  
        "bFilter": false  
    });  
});  `  

Inspecionando o HTML no Firebug, você vê isso (observe o estilo adicionado = "largura: 0px;")

<table id="querytableDatasets" class="display" cellspacing="0" 
cellpadding="3" width="100%" style="width: 0px;">

Olhando para os estilos no Firebug, o estilo table.display foi substituído. Não consigo ver de onde isso está vindo

element.style {  
  width:0;}    

-- dataTables.css (line 84
table.display { 
  margin:0 auto;  
  width:100%;  
}  

Para sua informação, acabei de encontrar um problema em que uma coluna não estava ajustando corretamente no IE8. O culpado foi uma imagem que tinha a max-widthpropriedade definida. Aparentemente o IE8 não gosta muito dessa propriedade e a ignora em relação às tabelas de dados, embora a imagem tenha sido dimensionada corretamente na tela. Alterá-lo para widthcorrigir o problema.
John Bubriski

Respostas:


61

O problema é causado porque dataTable deve calcular sua largura - mas quando usado dentro de uma guia, não é visível, portanto, não pode calcular as larguras. A solução é chamar 'fnAdjustColumnSizing' quando a guia for exibida.

Preâmbulo

Este exemplo mostra como o DataTables com rolagem pode ser usado junto com as guias da UI do jQuery (ou qualquer outro método pelo qual a tabela está em um elemento oculto (display: none) quando é inicializada). O motivo pelo qual isso requer consideração especial é que, quando DataTables é inicializado e está em um elemento oculto, o navegador não tem nenhuma medida para fornecer DataTables, e isso exigirá o desalinhamento de colunas quando a rolagem estiver habilitada.

O método para contornar isso é chamar a função da API fnAdjustColumnSizing. Esta função irá calcular as larguras das colunas que são necessárias com base nos dados atuais e, em seguida, redesenhar a tabela - que é exatamente o que é necessário quando a tabela se torna visível pela primeira vez. Para isso, usamos o método 'show' fornecido pelas tabelas do jQuery UI. Verificamos se o DataTable foi criado ou não (observe o seletor extra para 'div.dataTables_scrollBody', que é adicionado quando o DataTable é inicializado). Se a tabela foi inicializada, nós a redimensionamos. Uma otimização pode ser adicionada para redimensionar apenas a primeira exibição da tabela.

Código de inicialização

$(document).ready(function() {
    $("#tabs").tabs( {
        "show": function(event, ui) {
            var oTable = $('div.dataTables_scrollBody>table.display', ui.panel).dataTable();
            if ( oTable.length > 0 ) {
                oTable.fnAdjustColumnSizing();
            }
        }
    } );

    $('table.display').dataTable( {
        "sScrollY": "200px",
        "bScrollCollapse": true,
        "bPaginate": false,
        "bJQueryUI": true,
        "aoColumnDefs": [
            { "sWidth": "10%", "aTargets": [ -1 ] }
        ]
    } );
} );

Veja isso para mais informações.


1
Eu também tenho o mesmo problema com @John McC, no entanto, apliquei minha tabela de dados a um modal, estou usando bootstrap e fiquei preso com esse problema ... você sabe como implementá-lo usando modal bootstrap em vez de guias? .I realmente preciso da sua ajuda
cfz

eu recomendo usar window.resize, veja um exemplo legacy.datatables.net/ref#fnAdjustColumnSizing
KingRider

"aoColumnDefs": [{"sWidth": "10%", "aTargets": [-1]}]. Eu conserto meu problema é só adicionar isso, obrigado.
Mina chen

55

Você vai querer ajustar duas variáveis ​​ao inicializar dataTables: bAutoWidtheaoColumns.sWidth

Supondo que você tenha 4 colunas com larguras de 50px, 100, 120px e 30px, você faria:

jQuery('#querytableDatasets').dataTable({  
        "bPaginate": false,  
        "bInfo": false,  
        "bFilter": false,
        "bAutoWidth": false,
        "aoColumns" : [
            { sWidth: '50px' },
            { sWidth: '100px' },
            { sWidth: '120px' },
            { sWidth: '30px' }
        ]  
    }); 

Mais informações sobre a inicialização de dataTables podem ser encontradas em http://datatables.net/usage

Observe a interação entre esta configuração de widhts e o CSS que você está aplicando. Você pode comentar seu CSS existente antes de tentar fazer isso para ver o quão perto você chega.


mmm. é o que você está dizendo é que isso é resultado de bAutoWidth: true, fazendo escolhas não particularmente inteligentes para a largura da coluna.
John Mac

É isso que eu penso. Minhas tabelas saltam se os dados têm comprimento inconsistente. É por isso que coloquei os parâmetros aoColumns e bAutoWidth.
artlung

1
lindo. consertou totalmente o meu problema.
Laguna

Incrível @Laguna! Adoro ouvir que respostas antigas como esta continuam a ser úteis.
artlung

1
"bAutoWidth": obras falsas. Mas só uma pergunta. É uma boa prática ou não se eu colocar detalhes de largura em minhas tags <th>?
finnTheHumin

52
jQuery('#querytableDatasets').dataTable({  
        "bAutoWidth": false
});

2
Esta foi a resposta certa para mim. Estou usando boostrap .table-responsive. Com o código da tabela de dados configurando sua própria largura, ele atrapalha.
mac10688 de

Vim aqui para postar minha solução para este problema estúpido que envolvia a remoção da propriedade de largura no evento de mudança de guia, mas isso parece ter corrigido. Obrigado. +1
Topher

Eu tenho 3 guias e tabelas de dados nas duas primeiras guias, a tabela na segunda guia não tinha largura total. isso resolveu meu problema. obrigado
Mike Volmar

47

Bem, não estou familiarizado com esse plugin, mas você poderia redefinir o estilo depois de adicionar a tabela de dados? Algo como

$("#querydatatablesets").css("width","100%")

após a chamada .dataTable?


1
Eu descobri que esta é a melhor solução também, porque no meu caso, a tabela também estava sendo configurada para 100px de largura quando qualquer uma das colunas ficou invisível - veja aqui: datatables.net/forums/discussion/3417/…
mydoghasworms

Esta é a solução que funcionou para mim. fornece um controle mais preciso sobre o css da tabela de dados em comparação com oTable.fnAdjustColumnSizing (); solução mencionada anteriormente.
Vijay Rumao

11

Tive vários problemas com as larguras das colunas das tabelas de dados. A solução mágica para mim foi incluir a linha

table-layout: fixed;

este css vai com o css geral da tabela. Por exemplo, se você declarou as tabelas de dados como a seguir:

LoadTable = $('#LoadTable').dataTable.....

então a linha css mágica iria para a classe Loadtable

#Loadtable {
margin: 0 auto;
clear: both;
width: 100%;
table-layout: fixed;

}


2
Isso ajuda, mas agora minhas colunas têm tamanhos estranhos. Eu esperava que as colunas com mais dados tivessem a maior largura de porcentagem.
cjbarth

7

A solução TokenMacGuys funciona melhor porque isso é o resultado de um bug no jQdataTable. O que acontece é que se você usar $ ('# something'). DataTable (). FnDestroy () a largura da tabela é definida para 100px em vez de 100%. Aqui está uma solução rápida:

$('#credentials-table').dataTable({
        "bJQueryUI": false,
        "bAutoWidth": false,
        "bDestroy": true,
        "bPaginate": false,
        "bFilter": false,
        "bInfo": false,
    "aoColumns": [
           { "sWidth": "140px" },
           { "sWidth": "300px" },
           { "sWidth": "50px" }       
        ],
        "fnInitComplete": function() {

            $("#credentials-table").css("width","100%");
        }

    });

6

Adicione esta classe css à sua página, isso corrigirá o problema:

#<your_table_id> {
    width: inherit !important;
}

1
Eu tive um problema separado com o qual tenho lutado nos últimos 30 minutos - esta linha de código o corrigiu - então eu só queria agradecer por este comentário aleatório.
user1274820

1
É exatamente por isso que dou respostas adicionais
Bahadir Tasdemir

5

Definir larguras explicitamente usando sWidthpara cada coluna E bAutoWidth: falsena dataTableinicialização resolveu meu problema (semelhante). Ame a pilha que transborda.


5

Você deve deixar pelo menos um campo sem campo fixo, por exemplo:

$('.data-table').dataTable ({

 "bAutoWidth": false,
 "aoColumns" : [
    null,
    null,
    null,                    
    null,
    {"sWidth": "20px"},
    { "sWidth": "20px"}]
});

Você pode alterar tudo, mas deixar apenas um como nulo, para que possa esticar. Se você colocar larguras em TODOS, não funcionará. Espero ter ajudado alguém hoje!


1
Era isso para mim, eu estava configurando todas as colunas para ter 1px. Deixar um de fora fez com que funcionasse magicamente. Obrigado!
demoncodemonkey

4
"fnInitComplete": function() {
    $("#datatables4_wrapper").css("width","60%");
 }

Isso funcionou bem para ajustar a largura da mesa inteira. Obrigado @Peter Drinnan!


Não consegui fazer com que a tabela enchesse corretamente seu recipiente pai. Tentei ajustar o css da mesa e seu invólucro para a largura: 100%; sem nenhuma diferença perceptível. Depois de tentar o método mencionado acima, funcionou maravilhosamente bem, mas não estou apontando para o invólucro, ao invés disso, eu tive que apontar para a própria mesa. Mas muito obrigado Nilani !!
Logic1


3

Nenhuma das soluções aqui funcionou para mim. Mesmo o exemplo na página inicial das tabelas de dados não funcionou daí para a inicialização da tabela de dados na opção mostrar.

Eu encontrei uma solução para o problema. O truque é usar a opção ativar para guias e chamar fnAdjustColumnSizing () na tabela visível :

$(function () {

// INIT TABS WITH DATATABLES
$("#TabsId").tabs({
    activate: function (event, ui) {
        var oTable = $('div.dataTables_scrollBody>table:visible', ui.panel).dataTable();
        if (oTable.length > 0) {
            oTable.fnAdjustColumnSizing();
        }
    }
});

// INIT DATATABLES
// options for datatables
var optDataTables = {
    "sScrollY": "200px",
    "bScrollCollapse": true,
    "bPaginate": false,
    "bJQueryUI": true,
    "aoColumnDefs": [
        { "sWidth": "10%", "aTargets": [-1] }
    ]
};
// initialize data table
$('table').dataTable(optDataTables);

});

2

Só para dizer que tive exatamente o mesmo problema que você, embora estivesse apenas aplicando JQuery a uma tabela normal sem qualquer Ajax. Por alguma razão, o Firefox não expande a tabela depois de revelá-la. Corrigi o problema colocando a mesa dentro de um DIV e aplicando os efeitos ao DIV.


2

Você está fazendo isso no evento pronto?

$ (documento) .ready (função () {...});

O tamanho provavelmente dependerá do documento estar totalmente carregado.


dê uma olhada no código acima - está acontecendo no retorno de chamada do carregamento ajax do contêiner div # tab-datasets. A tabela #querytableDatasets é fornecida por / cgi-bin / qryDatasets
John Mac

Eu entendo isso, não tenho certeza do momento para isso acontecer. Ao olhar para a fonte do plugin, parecia que a única vez que ele poderia definir uma largura de 0px é quando ele não conseguia determinar a tabela offSetWidth correta e eu percebi que isso estava relacionado à execução muito cedo.
Mufaka,

Hmm. Presumi que o retorno de chamada do carregamento ajax é chamado depois que a tabela #querytableDatasets é carregada. você acha que pode não ser o caso?
John Mac

BTW, para responder à sua pergunta sobre quando isso é executado, é uma resposta ao usuário clicar em um botão
John Mac

Hmm, não tenho certeza se posso adicionar algo mais então. Se for um clique de botão, o documento está totalmente carregado e não há razão para colocá-lo no evento pronto. Você pode brincar com a largura do contêiner da tabela ou tentar fazer com que seu (plugin DataTables) funcione fora do seu layout atual.
Mufaka,

1

Para qualquer pessoa com problemas para ajustar a largura da tabela / célula usando o plug-in de cabeçalho fixo:

Datatables depende de tags de cabeçalho para parâmetros de largura de coluna. Isso ocorre porque é realmente o único html nativo, já que a maioria do html interno da tabela é gerado automaticamente.

No entanto, o que acontece é que parte da sua célula pode ser maior do que a largura armazenada dentro das células do cabeçalho.

Ou seja, se sua tabela tiver muitas colunas (tabela ampla) e suas linhas tiverem muitos dados, chamar "sWidth": para alterar o tamanho da célula td não funcionará corretamente porque as linhas filho são redimensionadas automaticamente td com base no estouro conteúdo e isso acontece depois que a tabela é inicializada e passa seus parâmetros de inicialização.

O thead original "sWidth": os parâmetros são substituídos (reduzidos) porque as tabelas de dados acham que sua tabela ainda tem sua largura padrão de% 100 - ela não reconhece que algumas células estão sobrecarregadas.

Para corrigir isso, descobri a largura do overflow e considerei isso redimensionando a tabela de acordo depois que ela foi inicializada - enquanto estamos nisso, podemos iniciar nosso cabeçalho fixo ao mesmo tempo:

$(document).ready(function() {
  $('table').css('width', '120%');
  new FixedHeader(dTable, {
        "offsetTop": 40,
      });
});

1

crie seu fixedheader dentro do "sucesso" de sua chamada ajax, você não terá nenhum problema de alinhamento no cabeçalho e nas linhas.

success: function (result) {
              /* Your code goes here */

    var table = $(SampleTablename).DataTable();

        new $.fn.dataTable.FixedHeader(table);
}        

1

Espero que isso ajude alguém que ainda está lutando.

Não mantenha sua mesa dentro de qualquer recipiente. Transforme o invólucro da tabela em seu contêiner após a renderização da tabela. Eu sei que isso pode ser inválido em lugares onde você tem algo mais junto com a tabela, mas você sempre pode anexar esse conteúdo de volta.

Para mim, esse problema surge se você tiver uma barra lateral e um contêiner que é, na verdade, um deslocamento dessa barra lateral.

$(YourTableName+'_wrapper').addClass('mycontainer');

(Eu adicionei um painel padrão)
E sua classe:

.mycontainer{background-color:white;padding:5px;}


0

Eu tive um problema semelhante ao ter um div enrolado na mesa.

Adicionando posição: relativa corrigiu para mim.


#report_container {
 float: right;
 position: relative;
 width: 100%;
}

0

Eu tive um problema semelhante onde o conteúdo da tabela era maior do que o cabeçalho e rodapé da tabela. Adicionar um div ao redor da tabela e definir o x-overflow parece ter resolvido este problema:


0

Certifique-se de que todos os outros parâmetros antes de bAutoWidth e aoColumns foram inseridos corretamente. Qualquer parâmetro incorreto anterior interromperá essa funcionalidade.


0

Eu tive um problema semelhante e descobri que o texto nas colunas não quebra e usar este código css resolveu o problema

th,td{
max-width:120px !important;
word-wrap: break-word
}

0

Esta é a minha maneira de fazer isso ..

$('#table_1').DataTable({
    processing: true,
    serverSide: true,
    ajax: 'customer/data',
    columns: [
        { data: 'id', name: 'id' , width: '50px', class: 'text-right' },
        { data: 'name', name: 'name' width: '50px', class: 'text-right' }
    ]
});

0

Eu encontro o mesmo problema hoje.

Usei uma maneira complicada de resolver isso.

Meu código conforme abaixo.

$('#tabs').tabs({
    activate: function (event, ui) {
       //redraw the table when the tab is clicked
       $('#tbl-Name').DataTable().draw();
    }
});

0

Verifique esta solução também. isso resolveu meu problema de largura da coluna DataTable facilmente

JQuery DataTables 1.10.20 apresenta um columns.adjust()método que corrige o problema da guia de alternância do Bootstrap

 $('a[data-toggle="tab"]').on( 'shown.bs.tab', function (e) {
    $.fn.dataTable.tables( {visible: true, api: true} ).columns.adjust();
} );

Consulte a documentação: guias de rolagem e bootstrap


-1

Isso funciona bem.

#report_container {
   float: right;
   position: relative;
   width: 100%;
}
Ao utilizar nosso site, você reconhece que leu e compreendeu nossa Política de Cookies e nossa Política de Privacidade.
Licensed under cc by-sa 3.0 with attribution required.