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