引导选项卡中的数据表大小不正确

Posted 2023-05-07

【中文标题】引导选项卡中的数据表大小不正确

【英文标题】：Datatables improperly sized in bootstrap tab

【发布时间】：2016-07-16 08:33:08

【问题描述】：

我有一个页面，其中包含三个引导选项卡和每个选项卡中的数据表。第一个选项卡中的数据表工作正常。但是，第二个选项卡中的数据表是半角的，我不知道为什么。也没有应用 css。

这是第一个选项卡的屏幕截图（工作正常）

还有第二个选项卡（半角数据表）

我的代码：

$('#companies').DataTable( //table in tab 1 (works fine)
        responsive: true
);


$('#companies2').DataTable( //table in tab 2
        responsive: true
);

我的html：

<!-- tab start -->
<div class="container">
    <div class="row">
        <div class="col-md-12">
            <h1>Tabs</h1>
            <ul class="nav nav-tabs">
                <li class="active"><a href="#tab1" data-toggle="tab">Section 1</a></li>
                <li><a href="#tab2" data-toggle="tab">Section 2</a></li>
                <li><a href="#tab3" data-toggle="tab">Section 3</a></li>
            </ul>

            <!-- tab sections -->
            <div class="tab-content">
                <div class="tab-pane active" id="tab1">
                    <table id="companies" class="table table-striped table-bordered dt-responsive nowrap" cellspacing="0">
                        <thead>
                            <tr>
                                <th>Company ID</th>
                                <th>Company Name</th>
                                <th>Status</th>
                                <th></th>
                                <th></th>
                            </tr>
                        </thead>
                        <tbody>
                            #each context
                            #if setup
                            <tr>
                                <td>company_id</td>
                                <td>company_name</td>
                                #if is_approved
                                <td>Approved</td>
                                else
                                <td>Not Approved</td>
                                /if
                                <td><a href="/admin/viewclientorders/company_id">View Orders</a></td>
                                <td><a href="/admin/company/company_id">View Details</a></td>
                            </tr>
                            /if
                            /each
                        </tbody>
                    </table> 
                </div>
                <div class="tab-pane" id="tab2">
                    <table id="companies2" class="table table-striped table-bordered dt-responsive nowrap" cellspacing="0">
                        <thead>
                            <tr>
                                <th>Company ID</th>
                                <th>Company Name</th>
                                <th>Create Date</th>
                                <th></th>
                                <th></th>
                            </tr>
                        </thead>
                        <tbody>
                            #each context
                            #unless setup
                            <tr>
                                <td>company_id</td>
                                <td>company_name</td>
                                <td>created_at</td>
                                <td><button class="btn btn-primary setup"><a href="/admin/companies/setup_company/company_id">Setup</a></button></td>
                                <td><button class="btn btn-danger delete">Ignore</button></td>
                            </tr>
                            /unless
                            /each
                        </tbody>
                    </table>
                </div>
                <div class="tab-pane" id="tab3">
                    3rd
                </div>

            </div>

有人可以帮忙吗？

【问题讨论】：

您似乎在底部遗漏了三个结束标签。我假设这是一个复制/粘贴错误。除此之外，您的标记看起来不错，您可以制作一个 JsFiddle 或链接到一个实时示例吗？问题可能在于它如何与代码的其他部分交互。

【参考方案1】：

保留dataTable实例，即

var companies2 = $('#companies2').DataTable(
  responsive: true
)

然后使用columns.adjust() 重新计算当持有表格的选项卡变得可见时的宽度：

$('a[data-toggle="tab"]').on('shown.bs.tab', function(e) 
  if (e.target.hash == '#tab2') 
    companies2.columns.adjust().draw()
  
)

完全未经您的特定场景测试，但这肯定是要走的路。

【参考方案2】：

我找到了一个非常简单的解决方案：添加“style:100%”

<table style="width: 100% !important" id="my-table" datatable="ng" dt-options="dtOptions" class="table table-striped table-bordered table-hover dataTables-example">

【参考方案3】：

解决方案

当表格可见时，使用columns.adjust() 和responsive.recalc() 重新计算列宽。

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

演示

https://jsfiddle.net/gyrocode/Ltga3n4u/

链接

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

【参考方案4】：

简单的修复！使用 autoWidth: false

$('#companies').DataTable( 
    responsive: true,
    autoWidth: false

);


$('#companies2').DataTable( 
    responsive: true,
    autoWidth: false

);

【参考方案5】：

在为 DataTables 使用响应式插件时，您还应该调用 responsive.recalc()，另外：

$(document).on('shown.bs.tab', 'a[data-toggle="tab"]', function (e) 
    $.fn.dataTable.tables( visible: true, api: true )
        .columns.adjust()
        .responsive.recalc()
        .draw();
);

这是一个老问题，但也许有人会帮助提供这些额外信息。