scrollX: true lost header ?

jvcunha

Hi,
when set scrollX: true, the header disappears.

my table:

                    <table id="myTable" class="display" style="font-size: 12px;">
                        <thead>
                            <tr>
                                <th>Tipo</th>
                                <th>Contrato</th>
                                <th>Data</th>
                                <th>Loja</th>
                                <th>Banco</th>
                                <th>Agência</th>
                                <th>DV</th>
                                <th>Conta</th>
                                <th>DV</th>
                                <th>Valor</th>
                                <th>Favorecido</th>
                                <th>Tp</th>
                                <th>Documento</th>
                            </tr>
                        </thead>
                    </table> 

my code:

                                var table = $('#myTable').DataTable({
                                    sDom: '<"H"lTfr>t<"F"ip>',
                                    order: [[2, 'desc'], [1, 'asc'], [7, 'asc']],
                                    lengthMenu: [[5, 10, 25, 50, 100, -1], [5, 10, 25, 50, 100, "Todos"]],
                                    pagingType: 'full_numbers',
                                    displayLength: 5,
                                    searchHighlight: true,
                                    jQueryUI: true,
                                    autosize: false,
                                    ajax: msg.d,
                                    bDeferRender: true,
                                    bDestroy: true,
                                    scrollX: true,
                                    initComplete: function () {
                                        var info = table.page.info();
                                        tot = info.recordsTotal;
                                        $('#myTable').show();
                                    },
                                    columns: [
                                        { width: '32px' },   // Tipo
                                        { width: '60px' },   // Contrato
                                        { width: '60px' },   // Data
                                        { width: '325px' },  // Loja
                                        { width: '152px' },  // Banco
                                        { width: '50px' },   // Agência
                                        { width: '20px' },   // dv agência
                                        { width: '50px' },   // conta
                                        { width: '20px' },   // dv conta
                                        { width: '80px' },   // valor
                                        { width: '320px' },  // favorecido
                                        { width: '10px' },   // tipo doc. favorecido
                                        { width: '100px' }   // doc. favorecido
                                    ],
                                    columnDefs: [
                                        { type: 'date', targets: 2 },
                                        { type: 'formatted-num', targets: 9, sClass: "right", mRender: function (data) { return formatNumber(data.toFixed(2), '.', ',', '.'); } }
                                    ],
                                    language: {
                                        sEmptyTable: 'Nenhum registro encontrado',
                                        sInfo: 'Mostrando de _START_ até _END_ de _TOTAL_ registros',
                                        sInfoEmpty: 'Mostrando 0 até 0 de 0 registros',
                                        sInfoFiltered: '(Filtrados de _MAX_ registros)',
                                        sInfoPostFix: '',
                                        sInfoThousands: '.',
                                        sLengthMenu: '_MENU_ registros por página',
                                        sLoadingRecords: 'Montando dados no grid. Aguarde por favor ...',
                                        sProcessing: 'Processando...',
                                        sZeroRecords: 'Nenhum registro encontrado',
                                        sSearch: 'Pesquisar',
                                        oPaginate: {
                                            sNext: 'Próximo',
                                            sPrevious: 'Anterior',
                                            sFirst: 'Primeiro',
                                            sLast: 'Último'
                                        },
                                        oAria: {
                                            sSortAscending: ': Ordenar colunas de forma ascendente',
                                            sSortDescending: ': Ordenar colunas de forma descendente'
                                        }
                                    },
                                    tableTools: {
                                        sSwfPath: '/copy_csv_xls_pdf.swf',
                                        aButtons: [
                                            {
                                                sExtends: "xls",
                                                sButtonText: "Excel",
                                                sFileName: "Transferências.xls",
                                                sToolTip: "Salvar dados em planilha do Excel"
                                            }
                                        ],
                                        destroy: true
                                    }
                                });

http://live.datatables.net/zedaharo/2/

allan

The test page doesn't actually appear to run - there are Javascript errors. Even with the files modified to load there is an undefined variable msg.d attached to the ajax option.

Allan

jvcunha

Hi Allan,
http://live.datatables.net/zedaharo/4/ correct.
but here, even defining a size in html (table), it does not simulate what's happening in my asp.net page.

allan

I'm afraid there is little help I can offer without a link to a page that demonstrates the issue.

Allan