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>