jQuery tabelas de dados: largura tabela de controlo

Question

Eu tenho um problema controlando a largura de uma tabela usando o plugin jQuery DataTables. A tabela é suposto ser 100% da largura do recipiente, mas acaba por ser uma largura arbitrária, um pouco menos do que a largura do recipiente.

Sugestões apreciado

Os olhares declaração mesa como este

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

Inspeção do HTML no Firebug, você vê isso (note o estilo adicionado = "width: 0px;")

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

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

element.style {  
  width:0;}    

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

Answer 1

O problema é causado porque dataTable deve calcular sua largura - mas quando usado dentro de um guia, não é visível, portanto, não pode calcular as larguras. A solução é chamada 'fnAdjustColumnSizing' quando os shows de tabulação.

Preâmbulo

Este exemplo mostra como tabelas de dados com rolagem podem ser usados ??juntos com abas jQuery UI (ou certamente qualquer outro método pelo qual a mesa está em um oculto (display: none) elemento quando ele é inicializado). O motivo isso requer uma consideração especial, é que quando tabelas de dados é inicializado e é um elemento escondido, o navegador não tem quaisquer medições com as quais a dar tabelas de dados, e isto irá exigir no desalinhamento das colunas ao rolar está habilitado.

O método de contornar este problema é chamar a API fnAdjustColumnSizing função. Esta função calcula as larguras das colunas que são necessário, com base nos dados atuais e, em seguida, redesenhar a mesa - que é exatamente o que é necessário quando a tabela se torna visível pela primeira Tempo. Para isso, use o método de 'show' fornecido por mesas jQuery UI. Nós verificamos para ver se o DataTable foi criado ou não (note o selector extra para 'div.dataTables_scrollBody', este é adicionado quando o DataTable é inicializado). Se a tabela foi inicializado, nós re-size ele. Uma optimização pode ser adicionado a re-tamanho da única 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 ] }
        ]
    } );
} );

Consulte este para mais informações.

Answer 2

Você vai querer ajustar duas variáveis ??quando você inicializar datatables: bAutoWidth e aoColumns.sWidth

Assumindo que você tem 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 tabelas de dados podem ser encontradas em http://datatables.net/usage

Watch para a interação entre esta definição de widhts eo CSS você está aplicando. Você pode comentar o seu CSS existente antes de tentar isso para ver o quão perto você começa.

Answer 3

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

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

após a chamada .dataTable?

Answer 4

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

Answer 5

Eu tive vários problemas com as larguras de datatables coluna. A solução mágica para mim foi incluindo a linha

table-layout: fixed;

este css vai com o css geral da tabela. Por exemplo, se você declarou os datatables como o seguinte:

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

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

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

}

Answer 6

solução TokenMacGuys funciona melhor becasue este é o resultado de um bug no jQdataTable. O que acontece é que se você usar $ ( '# sometabe'). DataTable (). FnDestroy () a tabela de largura fica definido 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%");
        }

    });

Answer 7

Definir larguras explicitamente usando sWidth para cada coluna e bAutoWidth: false na inicialização dataTable resolveu o meu problema (similar). Amo a pilha de transbordar.

Answer 8

Você tem que 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 mudar tudo, mas deixar apenas um como nulo, para que ele possa esticar. Se você colocar larguras em tudo o que não vai funcionar. Espero ter ajudado alguém hoje!

Answer 9

Adicione esta classe css para sua página, ele irá corrigir o problema:

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

Answer 10

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

Esta funcionou bem para ajustar toda a largura da tabela. Graças @ Peter Drinnan!

Answer 11

Como na tabela de dados 10.1, este é para a frente. Basta colocar largura atributo para sua mesa em HTML. ou seja width = "100%", este irá substituir todos os estilos CSS definidos pelo DT.

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

Answer 12

Nenhuma das soluções aqui funcionou para mim. Mesmo o exemplo na datatables homepage não funcionou, portanto, para a inicialização da tabela de dados na mostrar opção.

Eu encontrei uma solução para o problema. O truque é usar a opção Ativar para guias e fnAdjustColumnSizing call () sobre a mesa visíveis :

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

});

Answer 13

Só para dizer que eu tinha exatamente o mesmo problema que você, embora eu estava apenas se aplicam JQuery para uma mesa normal, sem qualquer Ajax. Por alguma razão, o Firefox não expandir a tabela para fora depois de revelar isso. Eu corrigiu o problema, colocando a mesa dentro de uma DIV, e aplicar os efeitos para o DIV em vez.

Answer 14

Você está fazendo isso no evento pronto?

$(document).ready(function() { ... });

O dimensionamento é mais provável vai ser dependente do documento que está sendo totalmente carregado.

Answer 15

Para qualquer um que tem problemas de adaptação da tabela / célula largura usando o plugin cabeçalho fixo:

datatables conta com marcas thead para os parâmetros de largura da coluna. Isto é porque a sua realmente o html única nativa como a maioria de html interna da tabela é gerada automaticamente.

No entanto, o que acontece é um pouco do seu celular pode ser maior do que a largura armazenados no interior das células thead.

i. se sua tabela tem um monte de colunas (ampla mesa) e suas linhas têm uma grande quantidade de dados, em seguida, chamar "sWidth": para mudar o tamanho da célula td não vai funcionar convenientemente, porque as linhas criança está redimensionando automaticamente td de base no conteúdo do estouro e isso acontece após da tabela foi inicializado e passou seus parâmetros de inicialização.

O thead original "sWidth":. Parâmetros se substituído (encolhido) porque datatables pensa sua mesa ainda tem a sua largura padrão de% 100 - que não reconhece que algumas células são transbordou

Para corrigir isso eu descobri a largura estouro e contabilizados pelo redimensionamento da tabela de acordo com após a tabela foi inicializado - enquanto estamos no assunto, podemos o init nosso cabeçalho fixo no mesmo tempo:

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

Answer 16

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

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

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

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

Answer 17

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

Não mantenha sua mesa dentro de qualquer recipiente. Fazer a tabela é envoltório seu recipiente depois da tabela é processado. Eu sei que isto pode ser inválida em lugares onde você tem mais alguma coisa junto com a mesa, mas então você pode sempre acrescentar que volta conteúdo.

Para mim, este problema surge se você tem uma barra lateral e um recipiente que é na verdade um deslocamento para que barra lateral.

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

(eu adicionei um painel painel-default)
E sua classe:

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

Answer 18

encontrar outro link útil sobre este problema e resolveu o meu problema.

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

datatables vigor largura da tabela

Answer 19

Eu corri para um problema semelhante quando se tem um div envolvida em torno da mesa.

Adicionando posição:. Relativa fixa-lo para mim

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

Answer 20

Eu tive um problema semelhante onde o conteúdo da mesa eram maiores do que o cabeçalho da tabela e rodapé. Adicionando um div ao redor da mesa e configuração x-estouro parece ter resolvido esse problema:

Answer 21

Certifique-se de que todos os outros parâmetros antes bAutoWidth & aoColumns são errado dos parâmetros corretamente entered.Any antes vai quebrar essa funcionalidade.

Answer 22

i teve o problema semelhante e descobriu que texto em colunas não quebrar e usando este código css resolveu o problema

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

Answer 23

Esta é a minha maneira de fazê-lo ..

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

Answer 24

I Conheça o mesmo problema hoje.

Eu usei um caminho complicado para resolvê-lo.

Meu código como abaixo.

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

Answer 25

Esta multa funciona.

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