CODEWITHSUNDEEP
jquerydatatablewidth
V.B
V.B

Reputation: 1211

JQuery DataTable Plugin Width issues

I am using jQuery datatable plugin. I am rendering my html table first and then applying the plugin. It has some issues.

Issues:

  1. Header column and body columns are not aligned.

  2. If there are a lot of columns (columns are generated dynamically not possible to set a fix width of columns) the data table grows horizontally.


Sample Code :

var scrollY = $(window).height() * 80 / 100;   
var oTable = $('#myTable').dataTable({
    "sScrollX": "100%",
    "sScrollY": scrollY,
    "bScrollCollapse": true,
    "bPaginate": false,
    "bStateSave": false,
    "bFilter": false,
    "bInfo": false,
    "bAutoWidth": false,
    "bSort": true,
    "aaSorting": []       
});

oTable.fnAdjustColumnSizing();

This is how my table is looking enter image description here


As you can see header and body are not aligned, table is expanding to the right of screen.
Any help is appreciated.

EDIT I am using this plugin inside JQuery tabs.

Upvotes: 0

Views: 305

Answers (1)

Fseee
Fseee

Reputation: 2627

First I would control the html structure before creating the datatable. It has to be like the following:

<table id="myTable">
<thead>
<tr>
    <th></th>
    <th></th>
    // exact number of th present in the datatable
</tr>
</thead>
<tbody>
</tbody>
</table>

then i would try to set:

"bAutoWidth": true

even if it's difficult to solve your problem without HTML code...

Upvotes: 1

Related Questions