Can't Get Columns to Maintain Width [Resolved]
Can't Get Columns to Maintain Width [Resolved]
I'm currently fighting with setting the widths of my columns, I'd like the table to scroll horizontally when needed, but for each column in the table to be the same fixed width.
I tried to set "sWidth" in "aoColumnDefs" to 200px, but I can't work out how to apply it to all columns (setting "aTargets": [-1] doesn't seem to work. Not sure if this might cause a problem, but I do already have two "aoColumnDefs" rules already with different targets. Here is my complete init script:
[code]// Initialse DataTables
var oTable = $('#dataTable').dataTable({
"aLengthMenu": [[10,25,50],[10,25,50]],
"sPaginationType": "bootstrap",
"sAjaxSource": dataTableSource,
"bDeferRender": true,
"sDom": "<'row'<'span pull-left compact-bottom'l><'span pull-right compact-bottom'C><'span pull-right compact-bottom'f>r><'clear'><'row'<'span12 compact-bottom't>><'row'<'span pull-left'i><'span pull-right'p>><'clear'>",
"aaSorting": [[1,'asc']],
"oLanguage": {
"sSearch": "Search all columns:"
},
"aoColumnDefs": [{
"bSearchable": false,
"bVisible": false,
"aTargets": initSystem
}, {
"bSearchable": false,
"bVisible": false,
"aTargets": initHidden
}, {
"sWidth": "200px",
"aTargets": [-1] // Not sure if [-1] is allowed here - see description for details.
}],
"oColVis": {
"buttonText": "Select Columns",
"bRestore": true,
"sRestore": "Restore Columns",
"sAlign": "right",
"aiExclude": initRequired,
"iOverlayFade": 150
},
"sScrollX": "100%",
"bScrollCollapse": true
});[/code]
The variables initSystem, initHidden and initRequired are JS arrays of column IDs generated dynamically based on classes I've set in my initial table. Generally speaking, initSystem is only [0] or [0, 1], and the others are more varied.
The problem comes in when I show or hide columns using ColVis. Showing the initially hidden columns squashes all the other columns, at which point they stay narrow until I reload the page. I'd like them to all stay exactly 200px wide and simply scroll horizontally when needed.
Unfortunately this work is on my local PC, so I don't have any examples to link to.. If you need to see more specific areas of my initialization code, just let me know and I'll post it. Anyone got any bright ideas here?
I tried to set "sWidth" in "aoColumnDefs" to 200px, but I can't work out how to apply it to all columns (setting "aTargets": [-1] doesn't seem to work. Not sure if this might cause a problem, but I do already have two "aoColumnDefs" rules already with different targets. Here is my complete init script:
[code]// Initialse DataTables
var oTable = $('#dataTable').dataTable({
"aLengthMenu": [[10,25,50],[10,25,50]],
"sPaginationType": "bootstrap",
"sAjaxSource": dataTableSource,
"bDeferRender": true,
"sDom": "<'row'<'span pull-left compact-bottom'l><'span pull-right compact-bottom'C><'span pull-right compact-bottom'f>r><'clear'><'row'<'span12 compact-bottom't>><'row'<'span pull-left'i><'span pull-right'p>><'clear'>",
"aaSorting": [[1,'asc']],
"oLanguage": {
"sSearch": "Search all columns:"
},
"aoColumnDefs": [{
"bSearchable": false,
"bVisible": false,
"aTargets": initSystem
}, {
"bSearchable": false,
"bVisible": false,
"aTargets": initHidden
}, {
"sWidth": "200px",
"aTargets": [-1] // Not sure if [-1] is allowed here - see description for details.
}],
"oColVis": {
"buttonText": "Select Columns",
"bRestore": true,
"sRestore": "Restore Columns",
"sAlign": "right",
"aiExclude": initRequired,
"iOverlayFade": 150
},
"sScrollX": "100%",
"bScrollCollapse": true
});[/code]
The variables initSystem, initHidden and initRequired are JS arrays of column IDs generated dynamically based on classes I've set in my initial table. Generally speaking, initSystem is only [0] or [0, 1], and the others are more varied.
The problem comes in when I show or hide columns using ColVis. Showing the initially hidden columns squashes all the other columns, at which point they stay narrow until I reload the page. I'd like them to all stay exactly 200px wide and simply scroll horizontally when needed.
Unfortunately this work is on my local PC, so I don't have any examples to link to.. If you need to see more specific areas of my initialization code, just let me know and I'll post it. Anyone got any bright ideas here?
This discussion has been closed.
Replies
[code]table.dataTable > thead > tr > th {
min-width: 180px;
}[/code]
Along with margins and padding, this puts my columns at a minimum width of either 207px or 208px, but in the end it does what I need. :)