我正在尝试为每列定义列宽,但它们的宽度都相同,即使我将bAutoWidth
设置为false,它们仍会计算最长列的宽度并将其设置为相同专栏的其余部分,我该怎么做才能解决这个问题。
以下是我的表格的HTML代码:
<table id="table_output" class="table table-bordered table-striped">
<thead>
<tr class="filters">
<td>ID</td>
<td>Date Time</td>
<td>Event</td>
</tr>
<tr>
<th style="width: 25px;">ID</th>
<th style="width: 80px;">Date Time</th>
<th style="width: 105px;">Event</th>
</tr>
</thead>
</table>
以下是我的数据表代码:
<script type="text/javascript">
$(document).ready(function() {
var dataSet = [
<?=$data;?>
];
$('#table_output').dataTable({
"order": [[ 0, "desc" ]],
"data": dataSet,
"bAutoWidth": false
});
// Setup - add a text input to each footer cell
var tbnum = 0;
$('#table_output thead td').each( function () {
var title = $('#table_output thead th').eq( $(this).index() ).text();
$(this).html( '<input type="text" class="search'+ tbnum +'" placeholder="Search '+title+'" />' );
tbnum+=1;
});
// DataTable
var table = $('#table_output').DataTable();
// Apply the search
table.columns().eq( 0 ).each( function ( colIdx ) {
//alert(colIdx);
$('.filters .search'+colIdx).on( 'keyup change', function () {
table.column(colIdx).search(this.value).draw();
});
});
});
</script>