sScrollX with show/hide and table, column width

preety

Hi,

I have a datatable with all possible options, reorder, show/hide and scrollX features and below is the initialization for the same.
There are 23 columns and to start with I want to keep 11 columns visible and the rest can be controlled using show/hide option by the user.
As you would see I have bAutoWidth: false and given sWidth(in percent) for each of the column and on page load it assigns column width to each of the 11 visible columns based on that percentage out of the total width available.

Coming to the issue I have posted this is when I use show/hide to add 12th column in my view port, I do not see much of a difference in overall table width, it still is the same and readjusts all the columns(including 11 previous + 1 new one) in the new table width . There is a horizontal scrollbar visible but that is kind of useless.

Again if I add 13th column in my view port , again it readjusts all the columns width in the nearly same table width thereby reducing the width of all columns.

What I would want to achieve is adjust first 11 columns in initial view port without a scrollbar and whenever I add a new column using show/hide , provide a horizontal scrollbar to accomodate this new column in an oversized table without readjusting the previous column widths.

I tried using sScrollXInner option but this one shows horizontal scrollbar always and creates an oversized table. Please help and provide any tips to achieve the above, not sure if I am missing on any more available options to get this going.

Thanks,
-Preetu

var oSearchTable = $("#searchResultTable").dataTable({
"sDom": 'RC<"clear">t<"dataTables_page_info"><"dataTables_custom_pagination">',
"aaData": sResponse,
"aoColumns": [
{
sTitle: "Expt ID ",
mDataProp: "experiment_id" ,
sWidth: "5%"
},
{
sTitle: "Expt Name ",
mDataProp: "experiment_name" ,
sWidth: "10%",
},
{
sTitle: "Site ",
mDataProp: "site_id" ,
sWidth: "5%"
},
{
sTitle: "Channel ",
mDataProp: "channel_id" ,
sWidth: "5%"
},
{
sTitle: "Status ",
mDataProp: "experiment_status" ,
sWidth: "5%"
},
{
sTitle: "Start Date ",
mDataProp: "start_date" ,
sWidth: "5%"
},
{
sTitle: "End Date ",
mDataProp: "end_date" ,
sWidth: "5%"
},
{
sTitle: "Business Unit ",
mDataProp: "experiment_scope_id" ,
sWidth: "5%",
},
{
sTitle: "Type ",
mDataProp: "experiment_type" ,
sWidth: "5%"
},
{
sTitle: "Version ",
mDataProp: "experiment_version" ,
sWidth: "5%"
},
{
sTitle: "Add to My Expt",
bSortable:true,
sWidth: "5%"
},
{
sTitle: "APP Context ",
mDataProp: "experiment_app_context" ,
sWidth: "15%"
},
{
sTitle: "System Context ",
mDataProp: "experiment_system_context" ,
sWidth: "5%"
},
{
sTitle: "PDS Context ",
mDataProp: "experiment_pds_context" ,
sWidth: "5%",
bVisible: false
},
{
sTitle: "Geo Context ",
mDataProp: "experiment_geo_context" ,
sWidth: "5%",
bVisible: false
},
{
sTitle: "Bpool ",
mDataProp: "is_bpool" ,
sWidth: "5%",
bVisible: false
},
{
sTitle: "Client Side ",
mDataProp: "is_clientside" ,
sWidth: "5%",
bVisible: false
},
{
sTitle: "Multi-site ",
mDataProp: "is_multisite" ,
sWidth: "5%",
bVisible: false
},
{
sTitle: "Multi-channel ",
mDataProp: "is_multichannel" ,
sWidth: "5%",
bVisible: false
},
{
sTitle: "Phase ",
mDataProp: "experiment_phase" ,
sWidth: "5%",
bVisible: false
},
{
sTitle: "Spectrum ",
mDataProp: "spectrum" ,
sWidth: "5%",
bVisible: false
},
{
sTitle: "Parent ID ",
mDataProp: "parent_id" ,
sWidth: "5%",
bVisible: false
},
{
sTitle: "Spectrum% ",
mDataProp: "spectrum_percentage" ,
sWidth: "5%",
bVisible: false
}

],
"bAutoWidth": false,
"bFilter":false,
"bSort":false,
"bLengthChange":false,
"bInfo":false,
"bPaginate":false,
"sScrollX": "100%"/*,
"sScrollXInner": "180%"*/

});

allan

Please link to a test case as clearly stated in the forum rules in future, it really helps with understanding and debugging and issue.

I suspect that you are hitting an issue with how tables are rendered in HTML. Simply put, the browser will throw away your calculations if they don't add up to 100%... (actually it takes them into account, but still reduces the content to fit into 100%).

There are two options off the top of my head:

1. Use `table-layout:fixed` for your table and assign the widths you need.

2. Use the sScrollXInner option you mentioned to force scrolling, dynamically calculating the extra amount of scrolling needed.

Allan

preety

Hi Allan,

Thanks for the reply.

1. I already have table-layout:fixed in the css.

2. Tried to limit all columns width added up to 100%, still no good. it adds a scrollbar when I unhide a column but would readjust all the previous columns as well. And the added scrollbar is no good, it is just minimal and i could still see all the columns if scrollbar would have not appeared because it just readjusted all the columns to fit within 100% table width.

3. Adding sScrollXInner is no good too, as this one always shows the scrollbar and sets the initial table width to be 140%(sScrollXInner value). I want the additional columns(12 - 23) to appear within the scrollbar , default 11 columns (1 - 11) should appear without a scrollbar.

I would appreciate if you can point me to a test case like this or help me debug this.

Thanks,
-Preety

preety

Here is the live example for the above : http://jsfiddle.net/pvishwakarma/B8VvQ/