Fixed table-layout issue: Is _fnGetMaxLenString - oSettings.aoData null?
Fixed table-layout issue: Is _fnGetMaxLenString - oSettings.aoData null?
Hi There,
This is my first post, so I would like to thank you for this free project. Thanks also for the obvious attention that you give to the posts in your forums.
After reading your 'how to post' article I must apologise for the lack of examples, but I am unable to upload examples for you to see, as my administrative team prevents us from being able to access public upload sites.
My Question:
I have a request to build a table that has a possible 30+ columns with data loaded by AJAX. Because of this I need to make the table horizontally scrollable. I have surrounded the table with an x scrolling div (xscroll). But have noticed that if I want to adjust the column widths, while it assumes its width is that which surrounds xscroll, then it will not let me make the column widths any wider. Then I had a look in the forums and the code and found that if I make the table-layout: fixed there is some algorithm that runs over the code and properly formats the columns nicely. I suppose that this function is exactly that, which is to fit the table into the confined space because when table-layout is fixed the columns squish even tighter together and it fits all into the 950px width even though the table's container is scrollable rather than table-layout:auto, which will not overlap unbroken lines of text. This, I know, is the nature of HTML tables.
I then went into the code and traced through from fnAdjustColumnSizing to find all the way into _fnGetMaxLenString when it runs over the columns to see which is longest for the calculation oSettings.aoData is null, which means it never does a calculation of column widths. I had a thought that perhaps this might be so because the calculation is done before the AJAX is loaded. Is this function supposed to run even if AJAXhas loaded and does it matter if it loads before or after the AJAX?
What interests me is that regardless of fnAdjustColumnSizing failed execution the th's at the top still get allocated a width which is really messing up the table.
Anyway, perhaps you might be able to suggest a better way of going about it.
We need to be able to specify 0 to many column widths but the table should be able to render outside of the given container
Assume the width of the table is far greater than that of its container and will be scrolling horizontally
We need to be able to hide and show columns and each hide and show should result in the table getting shorter or wider respectively.
We need to be able to load table content remotely
I noticed on another post you mentioned that you were going to be working on a resizing and reordering plugin, I'm really looking forward to this!
[code]
var oTable = $('#generic').dataTable( {
"sAjaxSource": "tabledata.json",
"sDom":'R<"clear"><"pager"<"filter"f>C><"scrollx"rt><"pagedisplay"i<"settings">><"pagenums"p>',
"aoColumns": [
{
"mDataProp" : "name"
},
{
"mDataProp" : "phone",
"sClass" : "nobreak"
},
{ "mDataProp" : "email" },
{ "mDataProp" : "address" },
{ "mDataProp" : "suburb" },
{ "mDataProp" : "zipcode" },
{
"mDataProp" : "state",
"sWidth": "100px"
},
{ "mDataProp" : "country" },
{ "mDataProp" : "datecompleted" },
{ "mDataProp" : "description" },
{ "mDataProp" : "number" },
{ "mDataProp" : "id" },
{ "mDataProp" : "spousename" },
{ "mDataProp" : "spousesurname"},
{ "mDataProp" : "spouseemail" },
{ "mDataProp" : "surname" }
]
});
[/code]
This is my first post, so I would like to thank you for this free project. Thanks also for the obvious attention that you give to the posts in your forums.
After reading your 'how to post' article I must apologise for the lack of examples, but I am unable to upload examples for you to see, as my administrative team prevents us from being able to access public upload sites.
My Question:
I have a request to build a table that has a possible 30+ columns with data loaded by AJAX. Because of this I need to make the table horizontally scrollable. I have surrounded the table with an x scrolling div (xscroll). But have noticed that if I want to adjust the column widths, while it assumes its width is that which surrounds xscroll, then it will not let me make the column widths any wider. Then I had a look in the forums and the code and found that if I make the table-layout: fixed there is some algorithm that runs over the code and properly formats the columns nicely. I suppose that this function is exactly that, which is to fit the table into the confined space because when table-layout is fixed the columns squish even tighter together and it fits all into the 950px width even though the table's container is scrollable rather than table-layout:auto, which will not overlap unbroken lines of text. This, I know, is the nature of HTML tables.
I then went into the code and traced through from fnAdjustColumnSizing to find all the way into _fnGetMaxLenString when it runs over the columns to see which is longest for the calculation oSettings.aoData is null, which means it never does a calculation of column widths. I had a thought that perhaps this might be so because the calculation is done before the AJAX is loaded. Is this function supposed to run even if AJAXhas loaded and does it matter if it loads before or after the AJAX?
What interests me is that regardless of fnAdjustColumnSizing failed execution the th's at the top still get allocated a width which is really messing up the table.
Anyway, perhaps you might be able to suggest a better way of going about it.
We need to be able to specify 0 to many column widths but the table should be able to render outside of the given container
Assume the width of the table is far greater than that of its container and will be scrolling horizontally
We need to be able to hide and show columns and each hide and show should result in the table getting shorter or wider respectively.
We need to be able to load table content remotely
I noticed on another post you mentioned that you were going to be working on a resizing and reordering plugin, I'm really looking forward to this!
[code]
var oTable = $('#generic').dataTable( {
"sAjaxSource": "tabledata.json",
"sDom":'R<"clear"><"pager"<"filter"f>C><"scrollx"rt><"pagedisplay"i<"settings">><"pagenums"p>',
"aoColumns": [
{
"mDataProp" : "name"
},
{
"mDataProp" : "phone",
"sClass" : "nobreak"
},
{ "mDataProp" : "email" },
{ "mDataProp" : "address" },
{ "mDataProp" : "suburb" },
{ "mDataProp" : "zipcode" },
{
"mDataProp" : "state",
"sWidth": "100px"
},
{ "mDataProp" : "country" },
{ "mDataProp" : "datecompleted" },
{ "mDataProp" : "description" },
{ "mDataProp" : "number" },
{ "mDataProp" : "id" },
{ "mDataProp" : "spousename" },
{ "mDataProp" : "spousesurname"},
{ "mDataProp" : "spouseemail" },
{ "mDataProp" : "surname" }
]
});
[/code]
This discussion has been closed.
Replies
A zero width column? That would almost certainly require a fixed layout table. However, why not just make the column hidden?
Regarding the sizing issue - do you have width:100% somewhere in your CSS for the table - if you have fixed layout and width:100% then it would result in what you describe (assuming I understand correctly) - no scrolling and overlapping content.
The real problem with _fnGetMaxLenString is that it isn't accurate - i.e. "iiii" is longer than "mmm" but not as wide! This can result is a few issues which the rest of the software tries to correct, but a fixed layout wouldn't allow for that correction.
I'm afraid to say I would probably need to see an example of the setup so I can understand exactly what is going on. Can you use http://live.datatables.net to do that?
Allan