我最近将我的 DataTables 插件切换为使用滚动条而不是分页。我意识到一旦切换它，就会发生两个奇怪的问题。第二行出现在列标题下方，只有排序箭头，列标题不再与列对齐。在第一个选项卡上它只有一点点，但在随后的选项卡上它真的关闭了。
修复它的唯一方法是在加载后对其中一列进行排序，这可以解决对齐问题。
我正在寻求一些帮助，以找出我的代码中导致这种情况发生的问题。
Javascript:
<script>
$(document).ready(function()
{
$('a[data-toggle="tab"]').on( 'shown.bs.tab', function (e) {
$.fn.dataTable.tables( {visible: true, api: true} ).columns.adjust();
} );
$('table.table').DataTable({
responsive: true,
"order": [[ 7, "desc" ]],
"scrollY": "500px",
"scrollCollapse": true,
"paging": false,
"bInfo" : false
});
$('#dt-players-all2').DataTable().search( '' ).draw();
});
</script>
HTML:
@extends('layouts.default')
@section('content')
<div id="page-wrapper">
<div class="row">
<div class="col-lg-12"> </div>
</div>
<div class="row">
<div class="col-lg-6">
<div class="panel panel-default">
<!-- Panel Header -->
<div class="panel-heading">
Players Overview
</div>
<!-- /Panel Header -->
<!-- Panel Body -->
<div class="panel-body">
<div class="dataTable_wrapper">
<ul class="nav nav-tabs" role="tablist">
<li class="active"><a href="#tab-all" data-toggle="tab">All</a></li>
<li><a href="#tab-qb" data-toggle="tab">QB</a></li>
<li><a href="#tab-rb" data-toggle="tab">RB</a></li>
<li><a href="#tab-wr" data-toggle="tab">WR</a></li>
<li><a href="#tab-te" data-toggle="tab">TE</a></li>
<li><a href="#tab-flex" data-toggle="tab">FLEX</a></li>
<li><a href="#tab-dst" data-toggle="tab">DST</a></li>
</ul>
<div class="tab-content">
<div class="tab-pane active" id="tab-all">
<table class="table table-striped table-bordered table-hover" id="dt-players-all">
<thead>
<tr>
<th>Position</th>
<th>Player</th>
<th>Team</th>
<th>Opponent</th>
<th>Game</th>
<th>Opp. Rank</th>
<th>FPPG</th>
<th>Salary</th>
</tr>
</thead>
<tbody>
@foreach ($players as $player)
<tr class="odd gradeX">
<td>{{$player->position}}</td>
<td>{{$player->name}}</td>
<td>{{$player->team}}</td>
<td>{{$player->opponent}}</td>
<td>{{$player->status}}</td>
<td class="center">0</td>
<td class="center">{{$player->fppg}}</td>
<td class="center">${{$player->salary}}</td>
</tr>
@endforeach
</tbody>
</table>
</div>
<div class="tab-pane" id="tab-qb">
<table class="table table-striped table-bordered table-hover" id="dt-players-all2">
<thead>
<tr>
<th>Position</th>
<th>Player</th>
<th>Team</th>
<th>Opponent</th>
<th>Game</th>
<th>Opp. Rank</th>
<th>FPPG</th>
<th>Salary</th>
</tr>
</thead>
<tbody>
@foreach ($players as $player)
<tr class="odd gradeX">
<td>{{$player->position}}</td>
<td>{{$player->name}}</td>
<td>{{$player->team}}</td>
<td>{{$player->opponent}}</td>
<td>{{$player->status}}</td>
<td class="center">0</td>
<td class="center">{{$player->fppg}}</td>
<td class="center">${{$player->salary}}</td>
</tr>
@endforeach
</tbody>
</table>
</div>
</div>
</div>
<!-- /Panel Body -->
</div>
</div>
<!-- /.panel -->
</div>
</div>
</div>
@stop
最佳答案
解决方案
您的代码工作正常，只要确保您使用的是最新的 DataTables 版本即可。
此外，如果您使用的是响应式扩展，则需要使用 responsive.recalc()显示更改后重新计算 Scroller 扩展使用的宽度的 API 方法。
$('a[data-toggle="tab"]').on('shown.bs.tab', function(e){
$.each($.fn.dataTable.tables(true), function(){
$(this).DataTable()
.columns.adjust()
.responsive.recalc();
});
});
演示
参见 this jsFiddle用于代码和演示。
链接
参见 jQuery DataTables – Column width issues with Bootstrap tabs用于解决 jQuery DataTables 和 Bootstrap Tabs 最常见的问题。
关于javascript - DataTable 列不与滚动条对齐，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/33312096/