使用Scroller破解的数据表，JS数据＆amp; Bootstrap Nav选项卡

Question

将jQuery数据表与引导程序导航选项卡窗格结合使用时，我遇到了一个奇怪的问题。这三件事情的组合似乎只会出现这个问题：

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）。< / p>

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

如果你喜欢SO演示，这是一个JS Fiddle。

＆＃13;
＆＃13;
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();
});
＆＃13;
<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>
＆＃13;
＆＃13;
＆＃13;

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以获取代码和演示。

LINKS

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