DataTables logo DataTables

via Ad Packs
Table Width
  • brilangbrilang
    Posts: 16
    I'm using a DataTable in a fluid layout. The DataTable plugin appears to be calculating the width of the table in pixels and applying width: nnnpx as an inline style to the table element. I think there should be the option to calculate the width via a user-configurable variable to match the standard CSS width units. (%, em, px, etc...)
    Example Source Code:
    <table id="datatable">
	<thead>
		<tr>
			<th>ID</th>
			<th>Created By</th>
			<th>Date</th>
			<th>Company</th>
			<th>Origin</th>
			<th>Destination</th>

		</tr>
	</thead>
	<tbody>
		<cfoutput query="rsTickets"><tr>
			<td>#NumberFormat(rsTickets.ID, '000000')#</td>
			<td>#rsTickets.FullName#</td>
			<td>#DateFormat(rsTickets.CreatedTime,'yyyy-mm-dd')#&nbsp;#TimeFormat(rsTickets.CreatedTime,'hh:mm tt')#</td>
			<td>#rsTickets.CompanyName#</td>
			<td>#rsTickets.QuoteOriginCity#, #rsTickets.QuoteOriginCountry#</td>
			<td>#rsTickets.QuoteDestinationCity#, #rsTickets.QuoteDestinationCountry#</td>
		</tr></cfoutput>
	</tbody>
</table>
<script type="text/javascript">
$(document).ready(function () {
	$('#datatable').dataTable( {
			"bJQueryUI": true,
			"sPaginationType": "full_numbers",
			"bJQueryUI": true,
			"aoColumns": [
				{"bSearchable": true},
				{"bSearchable": true},
				{"bSearchable": true},
				{"bSearchable": true},
				{"bSearchable": true},
				{"bSearchable": true}	
			] } );
	} );
</script>
    Example Generated Code. Note this: style="width: 1089px;" on the <table>
    <div id="datatable_wrapper" class="dataTables_wrapper"><div class="fg-toolbar ui-widget-header ui-corner-tl ui-corner-tr ui-helper-clearfix"><div class="dataTables_length" id="datatable_length">Show <select size="1" name="datatable_length"><option value="10">10</option><option value="25">25</option><option value="50">50</option><option value="100">100</option></select> entries</div><div class="dataTables_filter" id="datatable_filter">Search: <input type="text"></div></div><table style="width: 1089px;" id="datatable">
	<thead>

		<tr>
			<th class="ui-state-default" style="width: 105px;"><span class="css_right ui-icon ui-icon-triangle-1-n"></span>Quote ID</th>
			<th class="ui-state-default" style="width: 132px;"><span class="css_right ui-icon ui-icon-carat-2-n-s"></span>Created By</th>
			<th class="ui-state-default" style="width: 239px;"><span class="css_right ui-icon ui-icon-carat-2-n-s"></span>Created Date</th>
			<th class="ui-state-default" style="width: 202px;"><span class="css_right ui-icon ui-icon-carat-2-n-s"></span>Company</th>
			<th class="ui-state-default" style="width: 118px;"><span class="css_right ui-icon ui-icon-carat-2-n-s"></span>Origin</th>

			<th class="ui-state-default" style="width: 137px;"><span class="css_right ui-icon ui-icon-carat-2-n-s"></span>Destination</th>
		</tr>
	</thead>
	<tbody>
		
	<tr class="odd">
			<td class="sorting_1">000001</td>
			<td class="">Fred Flintstone</td>
			<td class="">2009-11-17&nbsp;10:43 AM</td>
			<td class="">Test Company</td>
			<td class="">Vancouver, Canada</td>
			<td class="">Seattle, United States</td>
	</tr>
	<tr class="even">
			<td class="sorting_1">000002</td>
			<td class="">Barney Rubble</td>
			<td class="">2009-11-17&nbsp;11:10 AM</td>
			<td class="">Another Company</td>
			<td class="">Toronto, Canada</td>
			<td class="">Amsterdam, Netherlands</td>
		</tr></tbody>
</table><div class="fg-toolbar ui-widget-header ui-corner-bl ui-corner-br ui-helper-clearfix"><div class="dataTables_info" id="datatable_info">Showing 1 to 2 of 2 entries</div><div id="datatable_paginate" class="dataTables_paginate fg-buttonset fg-buttonset-multi paging_full_numbers"><span id="datatable_first" class="first ui-corner-tl ui-corner-bl fg-button ui-state-default ui-state-disabled">First</span><span id="datatable_previous" class="previous fg-button ui-state-default ui-state-disabled">Previous</span><span><span class="fg-button ui-state-default ui-state-disabled">1</span></span><span id="datatable_next" class="next fg-button ui-state-default ui-state-disabled">Next</span><span id="datatable_last" class="last ui-corner-tr ui-corner-br fg-button ui-state-default ui-state-disabled">Last</span></div></div></div>
  • brilangbrilang
    Posts: 16
    So, when I resize the browser window, the width of the table withing the datatable_wrapper remains the same whereas the rest of my page resizes properly.

    I've found a work-around in that I have used the following CSS to force the table to obey me.
    #datatable {
	width: 100% !Important;
}

    Not an ideal situation, and I'd like to see a fix.
  • brilangbrilang
    Posts: 16
    Anyone got a comment? Can anyone else confirm this behaviour?
  • allanallan
    Posts: 10,309
    Hi brilang,

    Yes I can confirm this. DataTables will set a static width on the table in order to try and stop some of the "nasty" resizing issues that can occur over paging. However, you can stop it doing this using bAutoWidth:false ( http://datatables.net/usage/features#bAutoWidth ) - this will allow your table to keep all the relative sizes you give it. The reason for doing it this way is to allow rapid development with DataTables, so there isn't a requirement on setting the widths manually, but allowing that option if it should be wanted (like in this case).

    Regards,
    Allan
  • jlundelljlundell
    Posts: 8
    Reviving this thread…I just started using DataTables (1.6.1) on a fairly trivial table in the DOM. Mostly it works fine, but if I reload the page, occasionally the table width shrinks to a much smaller (but non-zero) width, and occasionally it goes wider than my page. In all cases, the three columns are "appropriately" sized, given the overall table width.

    (No options on DT initialization.)
  • allanallan
    Posts: 10,309
    That sounds very odd indeed. It sounds like your Javascript is rendering the table, and calculating the width, before it's flowed the entire document. I presume you are using $(document).ready, or something like that? I can't say I've seen this recently, so If you have a working example, that would be most useful. Also do you have something like width="100%" on the table? And does it work if you set bAutoWidth:false?

    Regards,
    Allan
  • jlundelljlundell
    Posts: 8
    As below. I don't have a way of making it publicly available at the moment. I'll try bAutoWidth.

    I see it with Safari 4.0.4 (OS X 6), but not Firefox.

    FWIW, when the table is in its small state, it appears to be sized to its content, though the th's do have width styles attached (viewed via Inspect Element). In the "normal" state, it's sized to its container. In the large state, I have no idea; it's bigger than my window. In the example I'm looking at right now, the normal table width is 750; the big is 1152. And now 1164. Even though dtable_wrapper is (implicitly) 750px.

    And I see it with Chrome. So…WebKit?


    $(document).ready(function() {
	/* Add a click handler to the rows - this could be used as a callback */
	$("#dtable tbody").click(function(event) {
		$(oTable.fnSettings().aoData).each(function (){
			$(this.nTr).removeClass('row_selected');
		});
		$(event.target.parentNode).addClass('row_selected');
	});
	
	/* Init the table */
	oTable = $('#dtable').dataTable();
} );

…

<table class="display" id="dtable">
<thead><tr><th>Label</th><th>Hostname</th><th>Description</th></tr></thead>
<tbody>
<tr><td>vpeptest1</td><td>10.3.50.11</td><td>Test 1</td></tr>
<tr><td>vpeptest2</td><td>10.3.50.12</td><td>Test 2</td></tr>
<tr><td>vpeptest3</td><td>10.3.50.13</td><td>Test 3</td></tr></tbody>
<tfoot><tr><th>Label</th><th>Hostname</th><th>Description</th></tr></tfoot></table>
  • jlundelljlundell
    Posts: 8
    disabling AutoWidth fixes it as well.
  • allanallan
    Posts: 10,309
    I've got to confess, that I have no idea why this would be happening! Sorry! All I can guess is that the browser is running the script early and calculating the wrong width. If you were to wrap your table in a DIV with a specific width and give the table width="100%" does that do the trick? If not, then perhaps bAutoWidth:false, and assign the width's you want for each column manually...

    Regards,
    Allan
  • jlundelljlundell
    Posts: 8
    I can live with turning off autowidth. dtable_wrapper is already a fixed width. Won't a 100% width just get overwritten but autowidth?

    If it would help, I can try to create a minimal case and post it on the public web. Let me know.
  • allanallan
    Posts: 10,309
    What should happen is that DataTables will look at the width of the plain HTML table and just fix it to that. So if you have a table that is width="100%", it is 'x' pixels wide. So DataTables sets it to 'x'px just to make sure the width doesn't jump around. Now I'm guessing that the 'x' calculated is occurring at some point when the document hasn't been fully flowed.

    Actually that's a point - I optimised the drawing of the table some what in 1.6.1. What version are you using? 1.6.1 might actually solve the problem if you are using an older version. Fixing the table fix is actually the last thing that DataTables does on initialisation now.

    REgards,
    Allan
  • jlundelljlundell
    Posts: 8
    I'm using 1.6.1. And I just started using DT, so I don't have an earlier experience to compare it to. For all I know it worked better before....

    Let me ask something that's maybe more of a CSS than a DT question. What I'm after, ideally, is a 100% table width, with all the columns but the last sized to their content, and the last column taking up the rest. The first columns aren't fixed-width, though, because their content isn't.
  • allanallan
    Posts: 10,309
    This is the thing about bAutoWidth - with is left on, it should calculate the optimal with based on the longest string in the table. If you want to override that, and stop DataTables from trying to be too clever for it's own good (which it looks like it is doing here), you can set bAutoWidth to false, then then simply put the widths you want onto the the table and TH elements (i.e. columns) in the table. It's very odd that it seems to be doing the calculation early, and even worse, only sometimes. Perhaps sizing it just like a regular table is the way to go for now - and if I can get this reproduced, then I'll look into a fix.

    Regards,
    Allan
  • jwmonteithjwmonteith
    Posts: 13
    Allan,

    I have spent a considerable amount of time trying to get control of the widths of the columns and am pretty sure that setting bAutoWidth to false is not working. Datatables continues to auto-calc the column widths as it sees fit. I have trimmed down the code to the bare bones even removing jEditable just to see if that is the problem, but no effect. I decided to set my table heading in the html instead of using aoColumns, using a class for all columns setting table-layout: fixed and an id for each column setting the desired width. I also tried to set column width with sWidth but no luck. Below are the code snippets.


    .tblcols {
    table-layout: fixed;
    }
    #idRank {
    width: 25px;
    }
    #idTicket {
    width: 25px;
    }
    etc.

    <table id="BCDtable">

    <thead>
    <tr>
    <th id="idRank" class="tblcols">xxxx</th>
    <th id="idTicket" class="tblcols">xxxxxx</th>
    <th id="idOwnerGM" class="tblcols">xxxxxxxx</th>
    <th id="idRel" class="tblcols">xxx</th>
    <th id="idCatg" class="tblcols">xxxx</th>
    <th id="idSubCatg" class="tblcols">xxxxxxx</th>
    <th id="idStatus" class="tblcols">xxxxxx</th>
    <th id="idProbIss" class="tblcols">xxxxxxxxxxxxx</th>
    <th id="idOpenDate" class="tblcols">xxxxxxxxx</th>
    <th id="idDaysOpen" class="tblcols">xxxxxxxxx</th>
    <th id="idDaysOnDeck" class="tblcols">xxxxxxxxxxxx</th>
    <th id="idProdDepETA" class="tblcols">xxxxxx</th>
    <th id="idERFCR" class="tblcols">xxxxxx</th>
    <th id="idUpdSol" class="tblcols">xxxxxxxxxxxxxxxx</th>
    <th id="idBusImp" class="tblcols">xxxxxxxxxxxxxx</th>
    <th id="idScore" class="tblcols">xxxxx</th>
    <th id="idOffice" class="tblcols">xxxxxx</th>
    <th id="idErrMsg" class="tblcols">xxxxxxxxxxxx</th>
    <th id="idWorkAround" class="tblcols">xxxxxxxxxxxxxx</th>
    <th id="idOpenToAV" class="tblcols">xxxxxxxxx</th>
    <th id="idAddedToDeck" class="tblcols">xxxxxxx</th>
    </tr>
    </thead>

    $(document).ready(function () {

    /* start Datatable */
    var oTable = $('#BCDtable').dataTable( {

    "bAutoWidth": false,
    "aoColumnDefs": [
    { "sWidth": "50px", "aTargets": [ "_all" ] }
    //{ "sClass": "test_class", "aTargets": [ "_all" ] }
    //{ "sTitle": "Title", "aTargets": [ "_all" ] }
    ] ...
  • allanallan
    Posts: 10,309
    Hi jwmonteith,

    If you use Webkit's Inspector, or Firebug or whatever, to view the live DOM from your example, what do you see the width CSS style is applied as? I've just tried it, and it correctly gives me 50px. The size isn't actually 50px due to other factors (I have width: 100% on the table for example) but the basic idea I believe is correct.

    Can you link us to an example where this does not work please?

    Allan
  • jwmonteithjwmonteith
    Posts: 13
    Thanks for your comments Allan. I trimmed down the code to make a simple example. Below is the code. Upon inspecting the CSS style that is applied using Firebug, I do see 300px for each column, but the executed code produces columns that are uniform in width, but not 300px. In fact they are much less in width than 300px. My concern is that I'm unable to obtain the desired column widths of my choosing. If I ask for 300px for a column, then I would hope to get a column that is 300px wide.

    .data_table {
    font-family: helvetica;
    font-size: 8.5px;
    }
    #top_of_page {
    position: absolute;
    }
    #main_table_area {
    position: absolute;
    top: 50px;
    height: 540px;
    width: auto;
    overflow: auto;
    }


    <script type="text/javascript" src="toolContentCenterJS_Test.js" ></script>

    <div id="top_of_page">
    top of page
    </div>

    <div id="main_table_area">
    <table id="TESTtable" class="data_table">
    <thead>
    <tr>
    <th>Column1</th>
    <th>Column2</th>
    <th>Column3</th>
    </tr>
    </thead>
    <cfset i=0>
    <cfoutput>
    <cfloop index = "i" from = "1" to = "10">
    <!--- write table row --->
    <tr>
    <td>column1 Data</td>
    <td>column2 Data column2 Data</td>
    <td>column3 Data column3 Data column3 Data </td>
    </tr>
    </cfloop>
    </cfoutput>
    </table>
    </div>


    $(document).ready(function () {

    /* start Datatable */
    var oTable = $('#TESTtable').dataTable( {

    "bAutoWidth": false,

    "aoColumnDefs": [
    { "sWidth": "300px", "aTargets": [ "_all" ] }
    ]
    });
    /* end Datatable */
    });
  • allanallan
    Posts: 10,309
    It's good that the 300px is applied to the columns individually - the rest it more or less up to the browser. Is there a constraint on the table layout that would stop it from taking up 900px (for example it might be in a 800px container). Can you give us a link to a working example of this not working properly - which will make it much easier to track down what is happening.

    Allan
  • jwmonteithjwmonteith
    Posts: 13
    Allan,

    Below is example html file. All you would need to do is adjust script lines for your location of jQuery and Datatables. When I run this code, the columns remain uniform in width, but not 300px. When inspecting the width CSS style, I am seeing 300px.

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">;
    <html xmlns="http://www.w3.org/1999/xhtml">;
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>Test for Datatables</title>

    <link media="screen" type="text/css" href="../../../jQuery/plugins/dataTables-1.7.1/media/css/demo_table.css" rel="stylesheet"/>
    <script type="text/javascript" src="../../../jQuery/lib/jquery.js" ></script>
    <script type="text/javascript" src="../../../jQuery/plugins/dataTables-1.7.1/media/js/jquery.dataTables.min.js"></script>

    <script>
    $(document).ready(function () {

    /* start Datatable */
    var oTable = $('#TESTtable').dataTable( {

    "bAutoWidth": false,

    "aoColumnDefs": [
    { "sWidth": "300px", "aTargets": [ "_all" ] }
    ]
    });
    /* end Datatable */
    });
    </script>

    <style>
    .data_table {
    font-family: helvetica;
    font-size: 8.5px;
    }
    #top_of_page {
    position: absolute;
    }
    #main_table_area {
    position: absolute;
    top: 50px;
    height: 540px;
    width: auto;
    overflow: auto;
    }
    </style>

    </head>

    <body>

    <div id="top_of_page">
    top of page
    </div>

    <div id="main_table_area">
    <table id="TESTtable" class="data_table">
    <thead>
    <tr>
    <th>Column1</th>
    <th>Column2</th>
    <th>Column3</th>
    </tr>
    </thead>

    <tr>
    <td>column1 Data</td>
    <td>COLUMN2 DATA COLUMN2 DATA</td>
    <td>column3 Data column3 Data column3 Data </td>
    </tr>

    <tr>
    <td>column1 Data</td>
    <td>COLUMN2 DATA COLUMN2 DATA</td>
    <td>column3 Data column3 Data column3 Data </td>
    </tr>

    <tr>
    <td>column1 Data</td>
    <td>COLUMN2 DATA COLUMN2 DATA</td>
    <td>column3 Data column3 Data column3 Data </td>
    </tr>

    </table>
    </div>

    </body>
    </html>
  • allanallan
    Posts: 10,309
    The problem is the floating elements are affecting the layout - rather than the width's not being correctly applied. Simply add this "table { clear: both }" to your CSS and it should work okay :-)

    Regards,
    Allan
  • jwmonteithjwmonteith
    Posts: 13
    It works! Thanks for all your help with this issue Allan. Really appreciate it!
  • Eric_DeCoffEric_DeCoff
    Posts: 8
    Allan,

    Has this issue been resolved?

    Can you point to an example?
  • gdoermanngdoermann
    Posts: 1
    I had this issue and it had to do with having inputs for individual column filters. I ran table.find('input,select').css('width', '5px') before I instantiated the table. Afterwards I made them width 100% with table.find('input,select').css('width', '100%'). This worked perfectly!
  • compsultcompsult
    Posts: 8
    gdoermann, thanks for pointing to the column filters in the footer, they were the culprit for me.

    I changed my table.display css, adding
    width: 1px;

    so it now looked this
    table.display tfoot th {
        padding: 3px;  
        border-top: 1px solid black;
        font-weight: bold;
        width: 1px;
}

    now when I set narrow column widths (less than 90px), they show up as speciified
Add a Comment

Howdy, Stranger!

It looks like you're new here. If you want to get involved, click one of these buttons!

Sign In Apply for Membership

Support

Get useful and friendly help straight from the source.

Categories

In this Discussion