因此,我尝试使用引导程序选项卡系统显示使用DataTables形成的各种表。除thead的大小外,其他所有功能都可以使用,当我切换标签时,搞砸了。

javascript - 引导选项卡困惑与表大小-LMLPHP javascript - 引导选项卡困惑与表大小-LMLPHP

HTML:

<div class="tab-content">
  <div class="tab-pane active" id="overview" role="tabpanel">
      <br/>
      <table id="overview_table" class="table table-striped table-bordered" cellspacing="0" width="100%">
          <thead>
            <tr>
                <th></th>
                <th>{{ etf1 }}</th>
                <th>{{ etf2 }}</th>
            </tr>
          </thead>
      </table>
  </div>
    <div class="tab-pane" id="holdings" role="tabpanel">
        <br/>
        <table id="holdings_table" class="table table-striped table-bordered" cellspacing="0" width="100%">
            <thead>
            <tr>
                <th></th>
                <th>{{ etf1 }}</th>
                <th>{{ etf2 }}</th>
            </tr>
            </thead>
        </table>
    </div>
    <div class="tab-pane" id="performance" role="tabpanel">
        <br/>
        <table id="performance_table" class="table table-striped table-bordered" cellspacing="0" width="100%">
            <thead>
            <tr>
                <th></th>
                <th>{{ etf1 }}</th>
                <th>{{ etf2 }}</th>
            </tr>
            </thead>
        </table>
    </div>
    <div class="tab-pane" id="technicals" role="tabpanel">
        <br/>
        <table id="technicals_table" class="table table-striped table-bordered" cellspacing="0" width="100%">
            <thead>
            <tr>
                <th></th>
                <th>{{ etf1 }}</th>
                <th>{{ etf2 }}</th>
            </tr>
            </thead>
        </table>
    </div>
</div>


Javascript:

    $(document).ready(function () {
        $.getJSON('/fund_monitor/api/get-comparison/{{ etf1 }}/{{ etf2 }}', function (data) {
           $('#performance_table').DataTable( {
                data:           data['overview'],
                scrollY:        200,
                scrollCollapse: true,
                paging:         false,
                ordering:       false,
                responsive:     true
            });



            $('#holdings_table').DataTable( {
                data:           data['holdings'],
                scrollY:        200,
                scrollCollapse: true,
                paging:         false,
                ordering:       false,
                responsive:     true
            });



            $('#technicals_table').DataTable( {
                data:           data['technicals'],
                scrollY:        200,
                scrollCollapse: true,
                paging:         false,
                ordering:       false,
                responsive:     true
            });
            $('#overview_table').DataTable( {
                data:           data['overview'],
                scrollY:        200,
                scrollCollapse: true,
                paging:         false,
                ordering:       false,
                responsive:     true
            });


所以thead是预定义的,所以我认为这是问题所在。在thead cells调用之后,如何使用javascript调整DataTable的大小?奇怪的是,第一个选项卡可以正常工作,而其余选项卡则不能。

最佳答案

这些选项卡可能会导致某些不稳定的CSS行为。我在项目中所做的就是在每次单击选项卡时重置CSS。下面的示例适用于您的示例,但是您可能希望对CSS应用更为具体,而不是针对所有表。

$('#TabGroup a').click(function (e) {
            e.preventDefault();
            $(this).tab('show');

            var tableWidth = // determine table/page/div width as integer //;
            $('table').removeAttr('style').css("width", tableWidth);

        });

关于javascript - 引导选项卡困惑与表大小,我们在Stack Overflow上找到一个类似的问题:https://stackoverflow.com/questions/45926997/

10-12 00:20
查看更多