jQuery DataTables: control table width

Question

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 arbitrar

Answer 1

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' }
    ]
});

Answer 2

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,
      });
});

Answer 3

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

Answer 4

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();
    }
});

Answer 5

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

Answer 6

This works fine.

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