引导程序选项卡中的数据表大小不正确 [英] Datatables improperly sized in bootstrap tab

问题描述

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

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

和第二个标签(半宽的数据表)

我的代码:

$('#companies').DataTable({//tab 1 中的表格(工作正常)响应:真实});$('#companies2').DataTable({//tab 2 中的表格响应:真实});

我的 html:

<div class="容器"><div class="row"><div class="col-md-12"><h1>标签</h1><ul class="nav nav-tabs"><li class="active"><a href="#tab1" data-toggle="tab">第 1 节</a></li><li><a href="#tab2" data-toggle="tab">第 2 节</a></li><li><a href="#tab3" data-toggle="tab">第 3 节</a></li><!-- 标签部分--><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"><头><tr><th>公司ID</th><th>公司名称</th><th>状态</th><th></th><th></th></tr></thead>{{#每个上下文}}{{#if 设置}}<tr><td>{{company_id}}</td><td>{{company_name}}</td>{{#if is_approved}}<td>批准</td>{{别的}}<td>未批准</td>{{/如果}}<td><a href="/admin/viewclientorders/{{company_id}}">查看订单</a></td><td><a href="/admin/company/{{company_id}}">查看详情</a></td></tr>{{/如果}}{{/每个}}</tbody>

<div class="tab-pane" id="tab2"><table id="companies2" class="table table-striped table-bordered dt-responsive nowrap" cellspacing="0"><头><tr><th>公司ID</th><th>公司名称</th><th>创建日期</th><th></th><th></th></tr></thead>{{#每个上下文}}{{#除非设置}}<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">忽略</button></td></tr>{{/除非}}{{/每个}}</tbody>

<div class="tab-pane" id="tab3">第三名

有人可以帮忙吗?

解决方案

保留 dataTable 实例，即

var Companies2 = $('#companies2').DataTable({响应:真实})

然后使用columns.adjust() 在包含表格的选项卡变得可见时重新计算宽度:

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

完全未经您的特定场景测试，但这当然是可行的方法.

I have a page that has three bootstrap tabs and a datatable in each tab. The datatable in the first tab works fine. However, the datatable in the second tab is at half-width and I have no idea why. There's no css applied to it either.

Here's a screenshot of the first tab (works fine)

And the 2nd tab (datatable at half width)

My code:

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


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

My 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>

Can someone help?

解决方案

Keep the dataTable instances, i.e.

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

Then use columns.adjust() to recalculate the widths when the tab holding the table becomes visible :

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

Completely untested with your specific scenario, but this is certainly the way to go.

这篇关于引导程序选项卡中的数据表大小不正确的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！