views:

6734

answers:

5

I have a problem controlling the width of a table using the jQuery DataTables plugin. The table is supposed to be 100% of the container width, but ends up being an arbitrary width, rather less than the container width.

Suggestions appreciated

The table declaration looks like this

<table id="querytableDatasets" class="display" cellspacing="0"
cellpadding="3"     width="100%">

And the javascript

jQuery('#tab-datasets').load('/cgi-bin/qryDatasets', '', function (){  
    jQuery('#querytableDatasets').dataTable({  
        "bPaginate": false,  
        "bInfo": false,  
        "bFilter": false  
    });  
});  `

Inspecting the HTML in Firebug, you see this (note the added style="width: 0px;")

<table id="querytableDatasets" class="display" cellspacing="0" 
cellpadding="3" width="100%" style="width: 0px;">

Looking in Firebug at the styles, the table.display style has been overridden. Can't see where this is coming from

element.style {  
  width:0;}    

-- dataTables.css (line 84
table.display { 
  margin:0 auto;  
  width:100%;  
}
+4  A: 

Well, I'm not familiar with that plugin, but could you reset the style after adding the datatable? Something like

$("#querydatatablesets").css("width","100%")

after the .dataTable call?

TokenMacGuy
+1  A: 

Are you doing this in the ready event? $(document).ready(function() { ... });

The sizing is most likely going to be dependent on the document being fully loaded.

Mufaka
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
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
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
BTW to answer your question about when this runs, it's in response to the user clicking a button
John McC
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
+6  A: 

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.

artlung
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
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
+2  A: 

jQuery('#querytableDatasets').dataTable({
"bAutoWidth": false

});
Suraj
+1  A: 

Hi There. 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.

Dave