我正在使用一个简单的数据表，但页眉和页脚与数据之间的对齐方式存在问题。
这是我的一些代码：
<table id="samba_table" class="table table-striped table-hover table-bordered mytable" width="100%">
<thead>
<tr>
<th>Action</th>
<th>Cluster</th>
<th>Samba lead domain</th>
<th>Customer (samba)</th>
<th>Customer (Dolphin)</th>
<th>Project name</th>
<th>Assigned User</th>
<th>Samba ID</th>
<th>Opportunity owner</th>
<th>Created date</th>
<th>Close date</th>
<th>Samba stage</th>
<th>Win ratio (%)</th>
<th>Order Intake (€)</th>
<th>Consulting (€)</th>
</tr>
</thead>
<tbody>
@foreach($ids as $key => $project)
@if(!$project['in_db'])
<tr class="item">
<td><button type="button" class="btn btn-info btn-xs add_samba"><span class="glyphicon glyphicon-plus"></span></button></td>
<td class="owners_sales_cluster">{!! $project['owners_sales_cluster'] !!}</td>
<td class="opportunity_domain">{!! $project['opportunity_domain'] !!}</td>
<td class="account_name">{!! $project['account_name'] !!}</td>
<td class="customer_name">
<select class="customers dt-select2" style="width: 100%;" data-placeholder="Select a customer name">
@foreach($customers_list as $key => $value)
<option value="{{ $key }}" @if ($value == $project['account_name_modified']) selected @endif>
{{ $value }}
</option>
@endforeach
</select>
</td>
<td class="opportunity_name"><div contenteditable>{!! $project['opportunity_name'] !!}</div></td>
<td class="users_name" style="width: 200px;">
<select class="users dt-select2" style="width: 100%;" data-placeholder="Select a user name">
@foreach($users_select as $key => $value)
<option value="{{ $key }}">
{{ $value }}
</option>
@endforeach
</select>
</td>
<td class="public_opportunity_id">{!! $project['public_opportunity_id'] !!}</td>
<td class="opportunity_owner">{!! $project['opportunity_owner'] !!}</td>
<td class="created_date">{!! $project['created_date'] !!}</td>
<td class="close_date">{!! $project['close_date'] !!}</td>
<td class="stage">{!! $project['stage'] !!}</td>
<td class="probability">{!! $project['probability'] !!}</td>
<td class="amount_tcv">{!! $project['amount_tcv'] !!}</td>
<td class="consulting_tcv">{!! $project['consulting_tcv'] !!}</td>
</tr>
@endif
@endforeach
</tbody>
<tfoot>
<th></th>
<th></th>
<th></th>
<th></th>
<th></th>
<th></th>
<th></th>
<th></th>
<th></th>
<th></th>
<th></th>
<th></th>
<th></th>
<th></th>
<th></th>
</tfoot>
</table>
所以我从PHP中获得了要放入表中的所有数据。
然后在JS中，我使用数据表来使其结构化。
samba_table = $('#samba_table').DataTable({
scrollX: true,
@if(isset($table_height))
scrollY: '{!! $table_height !!}vh',
scrollCollapse: true,
@endif
stateSave: true,
order: [[0, 'asc']],
columns: [
{ name: 'action', data: 'null' , searchable: true , visible: true},
{ name: 'owners_sales_cluster', data: 'owners_sales_cluster' , searchable: true , visible: true},
{ name: 'opportunity_domain', data: 'opportunity_domain' , searchable: true , visible: false},
{ name: 'account_name', data: 'account_name' , searchable: true , visible: true},
{ name: 'customer_name', data: 'customer_name' , searchable: false , visible: true},
{ name: 'opportunity_name', data: 'opportunity_name' , searchable: true , visible: true},
{ name: 'users_name', data: 'users_name' , searchable: false , visible: true},
{ name: 'public_opportunity_id', data: 'public_opportunity_id' , searchable: true , visible: true},
{ name: 'opportunity_owner', data: 'opportunity_owner' , searchable: true , visible: true},
{ name: 'created_date', data: 'created_date' , searchable: true , visible: false},
{ name: 'close_date', data: 'close_date' , searchable: true , visible: false},
{ name: 'stage', data: 'stage' , searchable: true , visible: false},
{ name: 'probability', data: 'probability' , searchable: true , visible: true},
{ name: 'amount_tcv', data: 'amount_tcv' , searchable: true , visible: true},
{ name: 'consulting_tcv', data: 'consulting_tcv' , searchable: true , visible: true},
],
lengthMenu: [
[ 10, 25, 50, -1 ],
[ '10 rows', '25 rows', '50 rows', 'Show all' ]
],
dom: 'Bfrtip',
buttons: [
{
extend: "colvis",
className: "btn-sm",
columns: [1,2,3,5,7,8,9,10,11,12,13,14]
},
{
extend: "pageLength",
className: "btn-sm"
},
{
extend: "csv",
className: "btn-sm",
exportOptions: {
columns: ':visible'
}
},
{
extend: "excel",
className: "btn-sm",
exportOptions: {
columns: ':visible'
}
},
{
extend: "print",
className: "btn-sm",
exportOptions: {
columns: ':visible'
}
},
],
drawCallback: function() {
$('.dt-select2').select2({
allowClear: true
});
$('.users').val(null).trigger('change');
},
initComplete: function () {
var columns = this.api().init().columns;
this.api().columns().every(function () {
var column = this;
// this will get us the index of the column
index = column[0][0];
//console.log(columns[index].searchable);
// Now we need to skip the column if it is not searchable and we return true, meaning we go to next iteration
if (columns[index].searchable == false) {
return true;
}
else {
var input = document.createElement("input");
$(input).appendTo($(column.footer()).empty())
.on('keyup change', function () {
column.search($(this).val(), false, false, true).draw();
});
};
});
}
});
这可以正确显示，但是问题是页眉和页脚列对齐，但数据列与页眉和页脚不对齐。
谢谢您的帮助