JQuery DataTables table width problem?

The issue is caused because dataTable must calculate its width - but when used inside a tab, it's not visible, hence can't calculate the widths. The solution is to call 'fnAdjustColumnSizing' when the tab shows.

The issue is caused because dataTable must calculate its width - but when used inside a tab, it's not visible, hence can't calculate the widths. The solution is to call 'fnAdjustColumnSizing' when the tab shows. See this for info.

You'll want to tweak two variables when you initialize dataTables: bAutoWidth and aoColumns. SWidth Assuming you have 4 columns with widths of 50px, 100, 120px and 30px you would do: jQuery('#querytableDatasets'). DataTable({ "bPaginate": false, "bInfo": false, "bFilter": false, "bAutoWidth": false, "aoColumns" : { sWidth: '50px' }, { sWidth: '100px' }, { sWidth: '120px' }, { sWidth: '30px' } }); More information on the initialization of dataTables can be found at http://datatables.net/usage Watch for interaction between this setting of widhts and the CSS you are applying.

You might comment your existing CSS before trying this to see how close you get.

Mmm. Is what you're saying is that this is a result of bAutoWidth:true making not particularly intelligent choices for column width. – John McC Mar 16 '09 at 22:04 This is what I think.My tables bounce around if the data is inconsistent in length.

This is why I put in the aoColumns and bAutoWidth parameters. – artlung Mar 19 '09 at 17:15.

Something like $("#querydatatablesets"). Css("width","100%") after the . DataTable call?

I have found this to be the best solution as well, because in my case, the table was also being set to 100px width when any of the columns was made invisible - see here: datatables. Net/forums/discussion/3417/… – mydoghasworms Aug 2 at 12:41.

Just to say I've had exactly the same problem as you, although I was just apply JQuery to a normal table without any Ajax. For some reason Firefox doesn't expand the table out after revealing it. I fixed the problem by putting the table inside a DIV, and applying the effects to the DIV instead.

$(document). Ready(function() { ... }); The sizing is most likely going to be dependent on the document being fully loaded.

Take a the code look above - it's happening in the callback from the ajax load of the div container #tab-datasets. Table #querytableDatasets is provided by /cgi-bin/qryDatasets – John McC Mar 3 '09 at 23:04 I understand that, I'm not sure of the timing for that happening. In looking at the plugin source, it seemed like the only time it could set a 0px width is when it couldn't determine the correct table offSetWidth and I figured that was related to running too early.

– Mufaka Mar 4 '09 at 0:24 hmm. I've assumed that the callback from the ajax load is called after the table #querytableDatasets is loaded. Do you think that this may not be the case?

– John McC Mar 4 '09 at 6:08 BTW to answer your question about when this runs, it's in response to the user clicking a button – John McC Mar 4 '09 at 6:09 Hmm, not sure I can add anything more then. If it's a button click, then the document is fully loaded and there is no reason to put this in the ready event. You might play around with the width of the table's container or try to get their (DataTables plugin) working outside of your current layout.

– Mufaka Mar 4 '09 at 0:23.

I ran into a similar issue when having a div wrapped around the table. Adding position: relative fixed it for me. #report_container { float: right; position: relative; width: 100%; }.

I ran into similar problems to do with animation. Sometimes because the div that is wrapped around the datatable is undergoing animation, and the datable is initialized at the same tim.

Setting widths explicitly using sWidth for each column AND bAutoWidth: false in dataTable initialization solved my (similar) problem. Love the overflowing stack.

I had a similar issue where the contents of the table were bigger than the table header and footer. Adding a div around the table and setting x-overflow seems to have sorted this issue.

Be sure that all others parameters before bAutoWidth & aoColumns are correctly entered. Any wrong parameter before will break this functionality.

I cant really gove you an answer,but what I can give you is a way to a solution, that is you have to find the anglde that you relate to or peaks your interest. A good paper is one that people get drawn into because it reaches them ln some way.As for me WW11 to me, I think of the holocaust and the effect it had on the survivors, their families and those who stood by and did nothing until it was too late.