column width cannot be reserved (scrollX enabled) show, hide some columns

smssly

Same problem has been posted here and didn't get any follow-up.

Other column width cannot be reserved (set up horizontal scroll bar by scrollX) after hide some columns

Tested in 1.10.5 and latest version 1.10.7. Still the same problem.

Any suggestion would be appreciated. Thanks.

https://datatables.net/forums/discussion/23751/column-width

---

i have a problem :( i'm using DataTables 1.10.2 and i have a table width so many columns, im using the scrollX option, I have an option to hide some type of columns based on a class, that's working good but i haven the next problem: i couldn't define the column width for my table, even when i´m using column defs it's seems to do another thing.

var columndefs = [{targets: 0,searchable: false,width: "26px","cellType": "th"},
            {targets: [1,2],searchable: true,width: "170px","visible": true},
            {targets: [3,4,5,6,7,8,9,10],searchable: false,'orderable': false,width: "60px","type": "html","visible": true}];
    var datatable = $('#gradestable').DataTable( {
        scrollX: true,
        paging: false,
        iDisplayLength: 50,
        columnDefs: columndefs,
        bAutoWidth:false,
        autoWidth: false,
        oLanguage: {
            "sProcessing": "{{ lang('table_processing') }}",
            "sLengthMenu": "{{ lang('table_recordsperpage') }}",
            "sZeroRecords": "{{ lang('table_noregisters') }}",
            "sEmptyTable": "{{ lang('table_empty') }}",
            "sInfo": "{{ lang('table_pager') }}",
            "sInfoEmpty": "{{ lang('table_pagerempty') }}",
            "sInfoFiltered": "{{ lang('table_filtered') }}",
            "sSearch": "{{ lang('table_search') }}",
            "sLoadingRecords": "{{ lang('table_loading') }}",
            "oAria": {
                "sSortAscending": "{{ lang('table_sortAsc') }}",
                "sSortDescending": "{{ lang('table_sortDesc') }}",
            },
            "oPaginate": {
                "sFirst": "{{ lang('table_first') }}",
                "sLast": "{{ lang('table_last') }}",
                "sNext": "{{ lang('table_next') }}",
                "sPrevious": "{{ lang('table_previous') }}",
            },
        }
    } );
    new $.fn.dataTable.FixedColumns( datatable, {leftColumns:3,heightMatch: "auto"});

when the table is loaded the column widths doesn't works and when i hide some columns this thing recalculate the widths (i supposed its try to mantain the scrollX and do that for ensure this) and thats awful!! becouse i want to get my widths quiet, i don't want that it change that!

anyone knows what should i do?

in that code i have a number of columns defined but that code is generated dinamycally according to the server side, it can grows a lot, I want to get my first 3 columns always equal, not recalculated or modified or nothing

smssly

Please refer to another similar problem posted on stackoverflow. Thanks.

datatables recalculate scroll on hide columns

http://stackoverflow.com/questions/26104518/datatables-recalculate-scroll-on-hide-columns

smssly

Here post another similar problem from stackoverflow:

---

i'm using the datatables plugin of http://datatables.net/ and the plugin for fixedColumns. I have a table of a lot of columns, so i decided to use scrollX and and option to hide some columns. The problem is that when i hide some columns, the plugin recalculate the width of my columns (i supposed it want to adjust the columns to the scrollX, so it increases the width of my columns), how i have 3 fixed columns, the width of this columns increases and i want to hold that columns.

also the plugin doesn't respect my width config, i don't know what's going on but it doesn't work good.

I want to know if somebody has a concept about it, some advice or something that i'm ignoring or the reason about this situation.

var columndefs = [{targets: 0,searchable: false,width: "26px","cellType": "th"},
            {targets: [1,2],searchable: true,width: "170px","visible": true},
            {targets: targets,searchable: false,'orderable': false,width: "60px","type": html","visible": true}];
var datatable = $('#gradestable').DataTable( {
        scrollX: true,
        paging: false,
        iDisplayLength: 50,
        columnDefs: columndefs,
        bAutoWidth:false,
        autoWidth: false,
        oLanguage: {
            "sProcessing": "{{ lang('table_processing') }}",
            "sLengthMenu": "{{ lang('table_recordsperpage') }}",
            "sZeroRecords": "{{ lang('table_noregisters') }}",
            "sEmptyTable": "{{ lang('table_empty') }}",
            "sInfo": "{{ lang('table_pager') }}",
            "sInfoEmpty": "{{ lang('table_pagerempty') }}",
            "sInfoFiltered": "{{ lang('table_filtered') }}",
            "sSearch": "{{ lang('table_search') }}",
            "sLoadingRecords": "{{ lang('table_loading') }}",
            "oAria": {
                "sSortAscending": "{{ lang('table_sortAsc') }}",
                "sSortDescending": "{{ lang('table_sortDesc') }}",
            },
            "oPaginate": {
                "sFirst": "{{ lang('table_first') }}",
                "sLast": "{{ lang('table_last') }}",
                "sNext": "{{ lang('table_next') }}",
                "sPrevious": "{{ lang('table_previous') }}",
            },
        }
    } );
    new $.fn.dataTable.FixedColumns( datatable, {leftColumns:3,heightMatch: "auto"});