4

Estou criando uma tabela usando o Datatables, mas gostaria de manter uma altura mínima mesmo quando tiver ao menos um registro.

<table id="example" class="table table-striped table-bordered" cellspacing="0" width="100%">
    <thead>
        <tr>
            <th>Name</th>
            <th>Position</th>
            <th>Office</th>
            <th>Age</th>
            <th>Start date</th>
            <th>Salary</th>
        </tr>
    </thead>

    <tbody>
        <tr>
            <td>Tiger Nixon</td>
            <td>System Architect</td>
            <td>Edinburgh</td>
            <td>61</td>
            <td>2011/04/25</td>
            <td>$320,800</td>
        </tr>

    </tbody>
</table>

e o JS

var nTrs = $('#example tbody tr');
if (typeof document.getElementsByTagName('td')[0] != 'undefined'){
    var iColspan = nTrs[0].getElementsByTagName('td').length;
}

var oTable = $('#example').dataTable({
    "columnDefs": [
        { "visible": false, "targets": 2 },
        ],
        "order": [[ 2, 'asc' ],[ 0, 'asc' ]],
    "orderFixed": [ 2, 'asc' ],
    "lengthChange": false,
    "scrollY": "200px",
    "scrollCollapse": true,
    "paging": false,
    "info": false,

    "drawCallback": function ( settings ) {
        var api  = this.api();
        var rows = api.rows( {page:'current'} ).nodes();
        var last = null;

        api.column(2, {page:'current'} ).data().each( function ( group, i ) {
            if ( last !== group ) {
                $(rows).eq( i ).before(
                    '<tr class="group"><td colspan="'+ (iColspan-1) +'" class="info">' + group + '</td></tr>'
                    );

                    last = group;
                }
            });
        }
});

o exemplo pode ser visto aqui https://jsfiddle.net/53q66vrt/

3
  • 1
    Acho que você poderia tentar Style="height='????px';"
    – Brunão
    Commented 11/05/2015 às 18:38
  • @Brunão simples assim, mas não cheguei a testar em vários navegadores para ver se o resultado será o esperado, deixei no css assim: #example{height: 250px} Commented 12/05/2015 às 18:21
  • 1
    @MarceloDiniz por favor coloque como resposta a solução que encontrou
    – Joao Paulo
    Commented 18/06/2015 às 13:46

1 Resposta 1

2

Conforme foi dado como resposta nos comentários, segue resposta para a questão como solucionei.

No CSS eu coloquei #example{height: 250px} e com isso já resolveu o problema.

Segue exemplo no https://jsfiddle.net/33hqd5m1/

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 .