jQuery DataTables: largura da tabela de controle

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%;  
}  

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.

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.

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

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?

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;

}

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%");
        }

    });

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

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

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

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!

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

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

Como na tabela de dados 10.1, isso é direto. Basta colocar o atributo de largura em sua tabela em HTML. ou seja, largura = "100%", isso substituirá todos os estilos CSS definidos pelo DT.

Veja este http://www.datatables.net/examples/basic_init/flexible_width.html

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);

});

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.

Você está fazendo isso no evento pronto?

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

O tamanho provavelmente dependerá do documento estar totalmente carregado.

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,
      });
});

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);
}        

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;}

encontre outro link útil sobre este problema e ele resolveu meu problema.

<table width="100%">
<tr>
    <td width="20%"> Left TD <td>
    <td width="80%"> Datatable </td>
</tr>
</table>

Tabela de largura de força de datatables

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%;
}

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:

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.

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
}

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' }
    ]
});

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();
    }
});

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

Isso funciona bem.

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