set column width
set column width
midland
Posts: 15Questions: 2Answers: 0
Hi there,
I use dataTable version 1.9.4. It is a powerful product. However, lots of features, styles and functions are difficult to implement. I have been struggling for a while to set column to fixed width without success. Below is the code: The first column is a radio that I want to have minimum width. I tried to use "sWidth" with both "px" and "%" and different combinations. None worked.
Thanks for your help!
@section scripts{
<link href="~/Content/DataTables-1.9.4/media/css/jquery.dataTables.css" rel="stylesheet" type="text/css" />
<script type="text/javascript">
$(document).ready(function () {
oTable = $('#requestDataTable').dataTable({
"sDom": '<"toolbar">frtip',
"bFilter": false,
"iDisplayLength": 20,
"bAutoWidth": false,
"aoColumns" : [
{ sWidth: "10%" },
{ sWidth: "30%" },
{ sWidth: "30%" },
{ sWidth: "30%" }
]
});
$('#requestDataTable tr').click(function () {
// get recordID
var itemid = $('[name="MyRadio"]:checked').prop('id');
if (itemid) alert(itemid);
else alert('please select a row');
});
});
</script>
}
<html>
<body>
<h2>Requests</h2>
<p>
@Html.ActionLink("Create New", "Create")
</p>
<div id="container">
<div id="demo">
<table id="requestDataTable" border="0" cellpadding="0" cellspacing="0" class="display" style="white-space:nowrap" >
<thead>
<tr>
<th></th>
<th>Request</th>
<th>Requestor</th>
<th>Proteins</th>
</tr>
</thead>
<tbody>
@foreach (var item in Model)
{
<tr>
<td>
<input type="radio" name="MyRadio" id="@item.RequestID"/>
</td>
<td>@item.RequestName</td>
<td>@item.Requestor</td>
<td>@item.ProteinNames</td>
</tr>
}
</tbody>
</table>
</div>
</div>
</body>
</html>
Answers
By not working, do you mean that it's having no effect or that it's not giving the accurate number that you're wanting?
Sorry, why the format is messed up. Let me try it again.
code:
@section scripts{
<link href="~/Content/DataTables-1.9.4/media/css/jquery.dataTables.css" rel="stylesheet" type="text/css" />
<script type="text/javascript">
$(document).ready(function () {
oTable = $('#requestDataTable').dataTable({
"sDom": '<"toolbar">frtip',
"bFilter": false,
"iDisplayLength": 20,
"bAutoWidth": false,
"aoColumns" : [
{ sWidth: "10%" },
{ sWidth: "30%" },
{ sWidth: "30%" },
{ sWidth: "30%" }
]
});
});
</script>
}
Hi Rpiechura,
What I meant by not working was that the column widths not affected. It looked like that they were the same as auto width. There was no error message either. I tried "columns" {"width", ###} and it did not work either. Very frustrated!
Thanks for your reply.
I can't re-produce that effect, when I use your code for myself datatables is making the table columns approximately the same size as you specify. The difference that I can see is that it doesn't always give the columns the exact size that you specify because of what appear to be padding / style issues.
My only suggestion would be if you want the columns to add up to say 650px, then assign them to have the sizes as you have been with sWidth and than make the container div have a style width of 650, that seems to make it so that the columns are approximately the correct size for me. The %'s are working exactly as I'd imagine they would so I really don't know what you could be doing wrong.
Hi Rpiechura,
Thanks very much for your help again. I also tried to adjust padding in css file and it did not work neither. I "solved" the problem by working on "div" width and I did not have to work with the width of "dataTable" column any more.
Thanks again.
try to change
//nTh.style.width = oSettings.aoColumns[i].sWidth;
nTh.style.minWidth = oSettings.aoColumns[i].sWidth;