ScrollX and width of headers problem

jvcunha

in creating the datatable when scrolly use the column headers have different column widths. Everything is messy.
if you click any column to change the order, it fixes the headers.
example: http://i.stack.imgur.com/2kwqP.png

var table = $ ( '[id $ = myTable]'). DataTable ({
    sDom: '< "H" LTFR> t < "F" ip>',
    order: [[1, 'desc']],
    lengthMenu [[5, 10, 25, 50, 100, -1], [5, 10, 25, 50, 100, "All"]],
    pagingType 'full_numbers'
    displayLength 5,
    searchHighlight: true,
    jQueryUI: true,
    bDeferRender: true,
    ajax: msg.d // JSON file
    bDestroy: true,
    bAutoWidth: false,
    sScrollX: true,
    sScrollXInner: "110%"
    columnDefs: [
        {Targets: 2, type: 'date'},
        {Targets: 41, Sclass "right"},
        {Targets: 42, Sclass "right"},
        {Targets: 43, Sclass "right"},
        {Targets: 44, Sclass "right"},
        {Targets: 45, Sclass "right"},
        {Targets: 46, Sclass "right"},
        {Targets: 47, Sclass "right"},
        {Targets: 48, Sclass "right"},
        {Targets: 49, Sclass "right"},
        {Targets: 50, Sclass "right"},
        {Targets: 51, Sclass "right"},
        {Targets: 52, Sclass "right"},
        {Targets: 53, Sclass "right"},
        {Targets: 54, Sclass "right"},
        {Targets: 55, Sclass "right"},
        {Targets: 56, Sclass "right"},
        {Targets: 57, Sclass "right"},
        {Targets: 58, Sclass "right"},
        {Targets: 59, Sclass "right"},
        {Targets: 60, Sclass "right"},
        {Targets: 61, Sclass "right"},
        {Targets: 62, Sclass "right"},
        {Targets: 63, Sclass "right"},
        {Targets: 65, Sclass "right"},
        {Targets: 66, Sclass "right"},
        {Targets: 78, Sclass "right"},
        {Targets: 79, Sclass "right"},
        {Targets: 80, Sclass "right"},
        {Targets: 81, Sclass "right"},
        {Targets: 82, Sclass "right"},
        {Type: 'date' targets: 84, mRender: function (data) {return formatDate (data); }}
        {Targets: 88 Sclass "right"},
        {Targets: 89 Sclass "right"}
    ]
    language: dataTableLanguagePTBR,
    tableTools: {
        sSwfPath '/copy_csv_xls_pdf.swf'
        aButtons: [
            {
                sExtends: "xls"
                sButtonText: "Excel"
                sFileName: "Control.xls"
                sToolTip: "Save data in Excel spreadsheet"
            }
        ]
        destroy: true
    }
});

allan

You need to use the columns.adjust() method to address this. There is an example available for use with Bootstrap tabs. If you aren't using Bootstrap tabs, you need to update the code to use whatever method you are using to show the tables.

Without a link to a test case showing that, or even the code for it, it is impossible to say exactly how it should be fixed.

Allan

jvcunha

Hi Allan, thank you for return but unfortunately it did not work. I use the scroll X and datatable is not within bootstrap tabs.
In addition the width of the headers become smaller than the data columns when roll to the right, the front header at times and only the dice are rolled

allan

I would need a link to a page showing the issue to be able to offer any help.

Allan

jvcunha

Hi Allan, I am sending the link in private

allan

Thanks for the link.

When the table is visible open your browser's console and enter:

$('#myTable').DataTable().columns.adjust()

You will be able to see that the columns are correctly sized to fit.

I don't actually see where you are calling columns.adjust() at all on that page, but you need to call that method when the table is visible in the DOM. Calling it before it is visible will not work.

Allan

jvcunha

Thanks Allan, resolved!
I had put in InitComplete table.columns.adjust (), so no success, therefore had taken.
I placed as indicated and now resolved.
Thank you for help and once again, congratulations

allan

Good to hear - thanks for posting back.

Allan