CODEWITHSUNDEEP
jquerydatatables
John Mac
John Mac

Reputation: 2550

jQuery DataTables: control table width

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%;  
}

Upvotes: 109

Views: 297352

Answers (27)

Suraj
Suraj

Reputation: 749

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

Upvotes: 74

John Foll
John Foll

Reputation: 156

Kudos to SingleNegationElimination above.

My solution uses part of his, plus something I got from somewhere else, plus some of my own code I figured out.

In my CSS file:

#MyTable {
    table-layout: fixed;
    width: 65vw; /*I want it to take up only 65% of viewport width*/
}

In my MVC .cshtml file (but could be in html file too):

var table = $('#MyTable').DataTable({ columnDefs: [{ target: 0, /*width: "30px",*/ type: "html-num", "className": "dt-center" /*Id*/ }, { target: 1, /*width: "60px",*/ type: "string", "className": "dt-center" /*Text*/ }, { target: 2, /*width: "30px",*/ type: "html-num", "className": "dt-center" /*Number Column*/ },                     { target: 3, /*width: "30px",*/ type: "html-num" }], order: [[1, 'desc']], fixedColumns: true, autoWidth: false, bFilter: false, scrollX: '95vw', scrollY: '75vh', paging: false, bInfo: false, ordering: true });  //Set ScrollY 75% of window height

//This code below overrides the initial sizing junk code that DataTable.net is doing so we can decide the widths!
$('#MyTable').css("width", "60vw"); //This resets the DataTable.net squirelly widths that are very hard to override!
$("div.dataTables_scrollHeadInner table.dataTable").css("width", "60vw");
$('#MyTable').DataTable().columns.adjust();
$('#MyTable').css("margin", "0");

//Resize the datatable to fix header widths to be the same size as the body column widths. Whenever the browser window is resized it adjusts the column in the header to match the columns in the body of the table
window.addEventListener('resize', function(event) {
    $($.fn.dataTable.tables(true)).DataTable().columns.adjust();
    $($.fn.dataTable.tables(true)).css("margin", "0");
    /*$($.fn.dataTable.tables(true)).css("width", "60vw");*/
}, true);

What this code does, which is different in some ways, is that it also handles the problem where DataTable Header is split out by DataTable.net. - If the browser is resized the Header doesn't get resized up without the addEventListener. But I added code to adjust the Header Width right after the DataTable was setup. The "table-layout: fixed;" in the CSS for the table is important too, so that you have control over the resizing. And the "width: 65vw;" in the css is important for me so that the table doesn't take up too much space. This helpful if auto sizing fields of the table - if the table is too big, if not table-layout: fixed, the browser would try to add more space to columns to make the width of the table a certain size.

Upvotes: 0

PNP
PNP

Reputation: 371

Check this solution too. this solved my DataTable column width issue easily

JQuery DataTables 1.10.20 introduces columns.adjust() method which fix Bootstrap toggle tab issue

 $('a[data-toggle="tab"]').on( 'shown.bs.tab', function (e) {
    $.fn.dataTable.tables( {visible: true, api: true} ).columns.adjust();
} );

Please refer the documentation : Scrolling and Bootstrap tabs

Upvotes: 3

Kenneth Wong
Kenneth Wong

Reputation: 51

I Meet the same problem today.

I used a tricky way to solve it.

My Code as below. 

$('#tabs').tabs({
    activate: function (event, ui) {
       //redraw the table when the tab is clicked
       $('#tbl-Name').DataTable().draw();
    }
});

Upvotes: 0

Bahadir Tasdemir
Bahadir Tasdemir

Reputation: 10783

Add this css class to your page, it will fix the issue:

#<your_table_id> {
    width: inherit !important;
}

Upvotes: 6

Chuanzhou Tang
Chuanzhou Tang

Reputation: 33

find another useful link about this problem and it resolved my problem.

<table width="100%">
<tr>
    <td width="20%"> Left TD <td>
    <td width="80%"> Datatable </td>
</tr>
</table>

Datatables force width table

Upvotes: 1

abcdefghiraj
abcdefghiraj

Reputation: 41

Hope this helps someone who's still struggling.

Don't keep your table inside any container. Make the table's wrapper your container after the table's rendered. I know this might be invalid at places where you have something else along with the table but then you could always append that content back.

For me,this problem arises if you have a sidebar and a container that is actually an offset to that sidebar.

$(YourTableName+'_wrapper').addClass('mycontainer');

(I added a panel panel-default)
And your class : 

.mycontainer{background-color:white;padding:5px;}

Upvotes: 1

Kevin Khew
Kevin Khew

Reputation: 501

This is my way of doing it..

$('#table_1').DataTable({
    processing: true,
    serverSide: true,
    ajax: 'customer/data',
    columns: [
        { data: 'id', name: 'id' , width: '50px', class: 'text-right' },
        { data: 'name', name: 'name' width: '50px', class: 'text-right' }
    ]
});

Upvotes: 0

Chandra Sekhar beluduru
Chandra Sekhar beluduru

Reputation: 21

create your fixedheader inside the "success" of your ajax call, you will not have any alignment problem in header and rows.

success: function (result) {
              /* Your code goes here */

    var table = $(SampleTablename).DataTable();

        new $.fn.dataTable.FixedHeader(table);
}

Upvotes: 1

Udit
Udit

Reputation: 679

As on Datatable 10.1, this is straight forward. Just put width attribute to your table in HTML. i.e. width="100%", this will override all CSS styles set by DT.

See this http://www.datatables.net/examples/basic_init/flexible_width.html

Upvotes: 6

Arik Kfir
Arik Kfir

Reputation: 748

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.

Preamble

This example shows how DataTables with scrolling can be used together with jQuery UI tabs (or indeed any other method whereby the table is in a hidden (display:none) element when it is initialised). The reason this requires special consideration, is that when DataTables is initialised and it is in a hidden element, the browser doesn't have any measurements with which to give DataTables, and this will require in the misalignment of columns when scrolling is enabled.

The method to get around this is to call the fnAdjustColumnSizing API function. This function will calculate the column widths that are needed based on the current data and then redraw the table - which is exactly what is needed when the table becomes visible for the first time. For this we use the 'show' method provided by jQuery UI tables. We check to see if the DataTable has been created or not (note the extra selector for 'div.dataTables_scrollBody', this is added when the DataTable is initialised). If the table has been initialised, we re-size it. An optimisation could be added to re-size only of the first showing of the table.

Initialisation code

$(document).ready(function() {
    $("#tabs").tabs( {
        "show": function(event, ui) {
            var oTable = $('div.dataTables_scrollBody>table.display', ui.panel).dataTable();
            if ( oTable.length > 0 ) {
                oTable.fnAdjustColumnSizing();
            }
        }
    } );

    $('table.display').dataTable( {
        "sScrollY": "200px",
        "bScrollCollapse": true,
        "bPaginate": false,
        "bJQueryUI": true,
        "aoColumnDefs": [
            { "sWidth": "10%", "aTargets": [ -1 ] }
        ]
    } );
} );

See this for more info.

Upvotes: 61

Helmut Steiner
Helmut Steiner

Reputation: 41

None of the solutions here worked for me. Even the example on the datatables homepage did not work hence to the initialization of the datatable in the show option.

I found a solution to the problem. The trick is to use the activate option for tabs and to call fnAdjustColumnSizing() on the visible table:

$(function () {

// INIT TABS WITH DATATABLES
$("#TabsId").tabs({
    activate: function (event, ui) {
        var oTable = $('div.dataTables_scrollBody>table:visible', ui.panel).dataTable();
        if (oTable.length > 0) {
            oTable.fnAdjustColumnSizing();
        }
    }
});

// INIT DATATABLES
// options for datatables
var optDataTables = {
    "sScrollY": "200px",
    "bScrollCollapse": true,
    "bPaginate": false,
    "bJQueryUI": true,
    "aoColumnDefs": [
        { "sWidth": "10%", "aTargets": [-1] }
    ]
};
// initialize data table
$('table').dataTable(optDataTables);

});

Upvotes: 3

Nilani Algiriyage
Nilani Algiriyage

Reputation: 35636

"fnInitComplete": function() {
    $("#datatables4_wrapper").css("width","60%");
 }

This worked fine to adjust the whole table width. Thanks @Peter Drinnan!

Upvotes: 4

Peter Drinnan
Peter Drinnan

Reputation: 4522

TokenMacGuys solution works best becasue this is the result of a bug in jQdataTable. What happens is if you use $('#sometabe').dataTable().fnDestroy() the table width gets set to 100px instead of 100%. Here is a quick fix:

$('#credentials-table').dataTable({
        "bJQueryUI": false,
        "bAutoWidth": false,
        "bDestroy": true,
        "bPaginate": false,
        "bFilter": false,
        "bInfo": false,
    "aoColumns": [
           { "sWidth": "140px" },
           { "sWidth": "300px" },
           { "sWidth": "50px" }       
        ],
        "fnInitComplete": function() {

            $("#credentials-table").css("width","100%");
        }

    });

Upvotes: 7

h0mayun
h0mayun

Reputation: 3601

i had the similar problem and found that text in columns don't break and using this css code solved the problem

th,td{
max-width:120px !important;
word-wrap: break-word
}

Upvotes: 0

user1842675
user1842675

Reputation: 251

I have had numerous issues with the column widths of datatables. The magic fix for me was including the line 

table-layout: fixed;

this css goes with the overall css of the table. For example, if you have declared the datatables like the following:

LoadTable = $('#LoadTable').dataTable.....

then the magic css line would go in the class Loadtable 

#Loadtable {
margin: 0 auto;
clear: both;
width: 100%;
table-layout: fixed;

}

Upvotes: 14

DrewT
DrewT

Reputation: 5072

For anyone having trouble adjusting table / cell width using the fixed header plugin:

Datatables relies on thead tags for column width parameters. This is because its really the only native html as most of the table's inner html gets auto-generated.

However, what happens is some of your cell can be larger than the width stored inside the thead cells.

I.e. if your table has a lot of columns (wide table) and your rows have a lot of data, then calling "sWidth": to change the td cell size won't work properly because the child rows are automatically resizing td's based on overflow content and this happens after the table's been initialized and passed its init params.

The original thead "sWidth": parameters get overridden (shrunk) because datatables thinks your table still has its default width of %100--it doesn't recognize that some cells are overflowed.

To fix this I figured out the overflow width and accounted for it by resizing the table accordingly after the table has been initialized--while we're at it we can init our fixed header at the same time:

$(document).ready(function() {
  $('table').css('width', '120%');
  new FixedHeader(dTable, {
        "offsetTop": 40,
      });
});

Upvotes: 1

Sam
Sam

Reputation: 376

This works fine.

#report_container {
   float: right;
   position: relative;
   width: 100%;
}

Upvotes: -1

cure85
cure85

Reputation: 471

You have to leave at least one field without fixed field, for example:

$('.data-table').dataTable ({

 "bAutoWidth": false,
 "aoColumns" : [
    null,
    null,
    null,                    
    null,
    {"sWidth": "20px"},
    { "sWidth": "20px"}]
});

You can change all, but leave only one as null, so it can stretch. If you put widths on ALL it will not work. Hope I helped somebody today!

Upvotes: 6

DejanR
DejanR

Reputation: 461

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

Upvotes: 0

Nick Holden
Nick Holden

Reputation: 3789

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:

Upvotes: 0

tubelight
tubelight

Reputation: 51

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

Upvotes: 5

Mufaka
Mufaka

Reputation: 3444

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.

Upvotes: 2

mardala
mardala

Reputation: 237

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%;
}

Upvotes: 0

Dave
Dave

Reputation: 21

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.

Upvotes: 2

artlung
artlung

Reputation: 34013

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.

Upvotes: 56

SingleNegationElimination
SingleNegationElimination

Reputation: 156138

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?

Upvotes: 48

Related Questions