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() API方法重新计算显示更改后Scroller扩展程序使用的宽度。

$('a[data-toggle="tab"]').on('shown.bs.tab', function(e){
   $.each($.fn.dataTable.tables(true), function(){
      $(this).DataTable()
         .columns.adjust()
         .responsive.recalc();
   });
});

样本

请参阅this jsFiddle以获取代码和演示。

LINKS

有关jQuery DataTables和Bootstrap选项卡最常见问题的解决方案，请参阅jQuery DataTables – Column width issues with Bootstrap tabs。

DataTable列不与滚动条对齐

1 个答案:

解

样本

LINKS