滚动条、JS 数据和引导导航选项卡破坏了数据表

Question

在将 jQuery Datatables 与引导导航选项卡窗格结合使用时，我遇到了一个奇怪的问题。问题似乎只发生在以下 3 件事的组合中：

1. 当数据源是本地JS，而不是来自Ajax调用时
2. 使用 DataTables Scroller 替换分页时
3. 加载数据时，当表位于具有 css display:none 的父级内时

3 个中的任何 2 个和数据都在那里，但所有 3 个都缺少结果集消息中的数据和 Showing NaN to x of x entries（或 Showing NaN to -Infinity of x entries 和 scrollCollapse: true）。

我已经尝试过使用 .DataTable().columns.adjust().draw();在父选项卡变为活动状态时更新表格，但这似乎只适用于重绘列宽，而不是在数据丢失时。

如果您更喜欢 SO 演示，这里是 JS Fiddle。

function loadTable()
{
	var json = '{"payout":[{"amount":"50.00","date":"2015-10-29 19:36:49"}, \
		{"amount":"50.00","date":"2015-11-30 19:36:49"}],"ledger": \
		{"earned":"111.78","paid":"100.00","owed":"11.78"}}';

	var r = $.parseJSON(json);
	  
	//$('#one table').DataTable({  //works fine using active panel
	$('#two table').DataTable({		//broken using inactive panel
		 data:		 r.payout
		,scroller:       true
		,scrollY:        200
		//,scrollCollapse: true   // uncomment and X of X becomes -infinity of x with #two
		,columns:		[
			 { title: 'Amount'  ,data: 'amount' }
			,{ title: 'Date'    ,data: 'date' }   
		]
	});
}

$(document).ready(function(){
	loadTable();
});

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet"/>
<link href="https://cdn.datatables.net/1.10.9/css/jquery.dataTables.min.css" rel="stylesheet"/>
<link href="https://cdn.datatables.net/scroller/1.4.0/css/scroller.dataTables.min.css" rel="stylesheet"/>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<script src="https://cdn.datatables.net/1.10.9/js/jquery.dataTables.min.js"></script>
<script src="https://cdn.datatables.net/scroller/1.4.0/js/dataTables.scroller.min.js"></script>


<div class="panel">
	<div class="panel-body">
 		<ul class="nav nav-tabs">
			<li><a data-toggle="tab" role="tab" aria-controls="one" href="#one">One</a></li>
			<li><a data-toggle="tab" role="tab" aria-controls="two" href="#two">Two</a></li>
			<li><a data-toggle="tab" role="tab" aria-controls="three" href="#three">Three</a></li>
		</ul>
		<div class="tab-content">
			<div id="one" class="tab-pane active" role="tabpanel">
				<h1>panel one</h1>
				<table></table>
			</div>
			<div id="two" class="tab-pane" role="tabpanel">
				<h1>panel two</h1>
				<table></table>
			</div>
			<div id="three" class="tab-pane" role="tabpanel">
				<h1>panel three</h1>
			</div>
		</div>
	</div>
</div>

Answer 1

解决方案

请参阅 scroller.measure() 函数，该函数应用于重新计算 Scroller 在最初隐藏表时使用的缓存测量值。

使用以下代码：

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

演示

有关代码和演示，请参阅this jsFiddle。

链接

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