jquery - 数据表因 Scroller、JS 数据和 Bootstrap 导航选项卡而损坏

Question

将 jQuery Datatables 与 Bootstrap 导航选项卡 Pane 结合使用时，我遇到了一个奇怪的问题。该问题似乎仅在以下三件事组合时才会出现:

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

3 个数据中的任意 2 个数据都存在，但对于所有 3 个数据，其数据丢失并且向 x 个条目中的 x 显示 NaN(或向 x 的 -Infinity 显示 NaN)结果集消息中包含 scrollCollapse: true 的条目。

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

这是一个JS Fiddle如果您更喜欢 SO 演示。

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 DataTables – Column width issues with Bootstrap tabs用于解决 jQuery DataTables 和 Bootstrap Tabs 的最常见问题。