I'm trying to set up width of columns as shown below:
var per_page = $("table").data("per_page");
$(".table").dataTable({
"aoColumnDefs": [
{ "sWidth": "100px", "aTargets": [ 1 ] },
{ "sWidth": "100px", "aTargets": [ 2 ] },
{ "sWidth": "100px", "aTargets": [ 3 ] },
{ "sWidth": "100px", "aTargets": [ 4 ] },
{ "sWidth": "100px", "aTargets": [ 5 ] },
{ "sWidth": "100px", "aTargets": [ 6 ] },
{ "sWidth": "100px", "aTargets": [ 7 ] }
],
"aoColumns" : [
{ "sWidth": "100px"},
{ "sWidth": "100px"},
{ "sWidth": "100px"},
{ "sWidth": "100px"},
{ "sWidth": "100px"},
{ "sWidth": "100px"},
{ "sWidth": "100px"},
{ "sWidth": "100px"},
],
bJQueryUI: true,
iDisplayLength: per_page,
"fnDrawCallback": function( oSettings ) {
if (oSettings._iDisplayLength == per_page)
return true
else {
$.post($(this).data("url"), {iDisplayLength: oSettings._iDisplayLength})
.done(function(data){
if (data.success)
per_page = oSettings._iDisplayLength;
});
}
}
})
But resulting column width is not that i'm trying to set. could you help me please?
Update 1
I've updated my initialization code as follows, but bumped into strange behavior on IE 9: Ie takes the longest field, devides it into lines , and takes it's length as default for all rows of this column.
var per_page = $("table").data("per_page");
$(".table").dataTable({
sScrollX: "100%",
aoColumns : [
{ "sWidth": "15%"},
{ "sWidth": "15%"},
{ "sWidth": "15%"},
{ "sWidth": "15%"},
{ "sWidth": "15%"},
{ "sWidth": "15%"},
{ "sWidth": "15%"},
],
bJQueryUI: true,
iDisplayLength: per_page,
"fnDrawCallback": function( oSettings ) {
if (oSettings._iDisplayLength == per_page)
return true
else {
$.post($(this).data("url"), {iDisplayLength: oSettings._iDisplayLength})
.done(function(data){
if (data.success)
per_page = oSettings._iDisplayLength;
});
}
}
})
Update 2
I've updated code as shown below, the result in ie 9 is that the heading of the datatable is resized to new size, but the rest of the table is untouched by changes , see screenshot http://gyazo.com/282967b051366b18634d4e778205c938
init code:
var per_page = $("table").data("per_page");
var datTable = $(".table").dataTable({
sScrollX: "100%",
sScrollX: "500px",
aoColumnDefs: [
{ bSortable: false, aTargets: [ 4, 5,6 ] },
{ sWidth: "16%", aTargets: [ 1, 2,3,4,5,6 ] },
],
bJQueryUI: true,
sAutoWidth: false,
iDisplayLength: per_page,
"fnDrawCallback": function( oSettings ) {
if (oSettings._iDisplayLength == per_page)
return true
else {
$.post($(this).data("url"), {iDisplayLength: oSettings._iDisplayLength})
.done(function(data){
if (data.success)
per_page = oSettings._iDisplayLength;
});
}
}
})
How can I fix this behavior ?
This question is related to
javascript
datatables
jquery-datatables
I would suggest not using pixels for sWidth, instead use percentages. Like below:
"aoColumnDefs": [
{ "sWidth": "20%", "aTargets": [ 0 ] }, <- start from zero
{ "sWidth": "5%", "aTargets": [ 1 ] },
{ "sWidth": "10%", "aTargets": [ 2 ] },
{ "sWidth": "5%", "aTargets": [ 3 ] },
{ "sWidth": "40%", "aTargets": [ 4 ] },
{ "sWidth": "5%", "aTargets": [ 5 ] },
{ "sWidth": "15%", "aTargets": [ 6 ] }
],
aoColumns : [
{ "sWidth": "20%"},
{ "sWidth": "5%"},
{ "sWidth": "10%"},
{ "sWidth": "5%"},
{ "sWidth": "40%"},
{ "sWidth": "5%"},
{ "sWidth": "15%"}
]
});
Hope it helps.
This is the only way i could get it working:
JS:
columnDefs: [
{ "width": "100px", "targets": [0] }
]
CSS:
#yourTable{
table-layout: fixed !important;
word-wrap:break-word;
}
The CSS part isn't nice but it does the job.
you should use
"bAutoWidth
" property of datatable and give width to each td/column in %
$(".table").dataTable({"bAutoWidth": false ,
aoColumns : [
{ "sWidth": "15%"},
{ "sWidth": "15%"},
{ "sWidth": "15%"},
{ "sWidth": "15%"},
{ "sWidth": "15%"},
{ "sWidth": "15%"},
{ "sWidth": "10%"},
]
});
Hope this will help.
I can tell you another simple way to fix the width of data table in html itself.
use
<colgroup>
<col width="3%">
<col width="3%">
</colgroup>
here is a sample code of data table below:
<table class="table datatable">
<colgroup>
<col width="33%">
<col width="33%">
<col width="33%">
<col width="33%">
</colgroup>
<thead>
<tr>
<th>User Id</th>
<th>Name</th>
<th>Email</th>
<th>Phone</th>
</tr>
</thead>
<tr>
<th>alpha</th>
<th>beta</th>
<th>gama</th>
<th>delta</th>
</tr>
<tr>
<th>alpha</th>
<th>beta</th>
<th>gama</th>
<th>delta</th>
</tr>
<tr>
<th>alpha</th>
<th>beta</th>
<th>gama</th>
<th>delta</th>
</tr>
</table>
You can define sScrollX : "100%"
to force dataTables to keep the column widths :
..
sScrollX: "100%", //<-- here
aoColumns : [
{ "sWidth": "100px"},
{ "sWidth": "100px"},
{ "sWidth": "100px"},
{ "sWidth": "100px"},
{ "sWidth": "100px"},
{ "sWidth": "100px"},
{ "sWidth": "100px"},
{ "sWidth": "100px"},
],
...
you can play with this fiddle -> http://jsfiddle.net/vuAEx/
My way to do 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' }
]
});
I have tried in many ways. The only way that worked for me was:
The Yush0 CSS solution:
#yourTable{
table-layout: fixed !important;
word-wrap:break-word;
}
Together with Roy Jackson HTML Solution:
<th style='width: 5%;'>ProjectId</th>
<th style='width: 15%;'>Title</th>
<th style='width: 40%;'>Abstract</th>
<th style='width: 20%;'>Keywords</th>
<th style='width: 10%;'>PaperName</th>
<th style='width: 10%;'>PaperURL</th>
</tr>
If you ever need to set your datatable column's width using CSS ONLY, following css will help you :-)
HTML
<table class="table table-striped table-bordered table-hover table-checkable" id="datatable">
<thead>
<tr role="row" class="heading">
<th width="2%">
<label class="mt-checkbox mt-checkbox-single mt-checkbox-outline">
<input type="checkbox" class="group-checkable" data-set="#sample_2 .checkboxes" />
<span></span>
</label>
</th>
<th width=""> Col 1 </th>
<th width=""> Col 2 </th>
<th width=""> Col 3 </th>
<th width=""> Actions </th>
</tr>
<tr role="row" class="filter">
<td> </td>
<td><input type="text" class="form-control form-filter input-sm" name="col_1"></td>
<td><input type="text" class="form-control form-filter input-sm" name="col_2"></td>
<td><input type="text" class="form-control form-filter input-sm" name="col_3"></td>
<td>
<div class="margin-bottom-5">
<button class="btn btn-sm btn-success filter-submit margin-bottom"><i class="fa fa-search"></i> Search</button>
</div>
<button class="btn btn-sm btn-default filter-cancel"><i class="fa fa-times"></i> Reset</button>
</td>
</tr>
</thead>
<tbody> </tbody>
</table>
Using metronic admin theme and my table id is #datatable as above.
CSS
#datatable > thead > tr.heading > th:nth-child(2),
#datatable > thead > tr.heading > th:nth-child(3) { width: 120px; min-width: 120px; }
for who still having issues with 1.9.4 change
//oSettings.aoColumns[i].nTh.style.width = _fnStringToCss(oSettings.aoColumns[i].sWidth);
oSettings.aoColumns[i].nTh.style.minWidth = _fnStringToCss(oSettings.aoColumns[i].sWidth);
I set the column widths in the HTML markup like so:
<thead>
<tr>
<th style='width: 5%;'>ProjectId</th>
<th style='width: 15%;'>Title</th>
<th style='width: 40%;'>Abstract</th>
<th style='width: 20%;'>Keywords</th>
<th style='width: 10%;'>PaperName</th>
<th style='width: 10%;'>PaperURL</th>
</tr>
</thead>
<tbody>
@foreach (var item in Model)
{
<tr id="@item.ID">
<td>@item.ProjectId</td>
<td>@item.Title</td>
<td>@item.Abstract</td>
<td>@item.Keywords</td>
<td>@item.PaperName</td>
<td>@item.PaperURL</td>
</tr>
}
</tbody>
</table>
Source: Stackoverflow.com