javascript - DataTable 列不与滚动条对齐

Question

我最近将我的 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">&nbsp;</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

Answer 1

解决方案

您的代码工作正常，只要确保您使用的是最新的 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 最常见的问题。