On First Load, DataTables Not displaying properly

osu1415

The data within the data table I have is not displaying properly. In Firefox, the body of the table is a little bit outside of the "box" while IE 9 has the table body fall off the page altogether.

See http://www.njacfootball.com/test/version3/news/ in both IE and Firefox.

I am using the DataTables-1.9.0/media/css/demo_table_jui.css.


Any and all help is welcomed. Thank you in advance.

[code]

@import "http://njacfootball.com/test/version3/styles/DataTables-1.9.0/media/css/demo_table_jui.css";
@import "http://njacfootball.com/test/version3/styles/DataTables-1.9.0/examples/examples_support/themes/southstreet/css/south-street/jquery-ui-1.8.18.custom.css";





$(document).ready(function() {
$('#example').dataTable( {
"bJQueryUI": true,
"bProcessing": true,
"bServerSide": true,
"sPaginationType": "full_numbers",
"sAjaxSource": "newsGet.php",
"iDisplayLength": 25,
"aaSorting": [[ 0, "desc" ],[ 2, "desc" ]],
"aoColumns": [{"bVisible":false, "bSortable":true}, { "iDataSort": 0, "bSortable":false }, null, null, null, null, null, {"bVisible":false}],
} );
} );





News









Date
Date
Source
Title
Author
Type
Keywords
Link




Loading data from server




Date
Date
Source
Title
Author
Type
Keywords
Link













[/code]

allan

The table content can't be made any smaller than it currently is - I think you would have this problem with a non-DataTables enhanced table as well. Specifically its this content which is causing the overflow: "http://www.dailyrecord.com/article/20111205/NJSPORTS0110/312050053/Butler- ... ".

So there are a number of options:

1. Enable x-scrolling in DataTables ( sScrollX ).
2. Wrap the content of the cells in DIVs and set a maximum width with overflow: hide
3. Change the content of the cells
4. Ellipsis
4. Probably others I can't think of off the top of my head :-)

Allan

osu1415

Wow - thanks Allan. That was a huge help. Thank you.