WebChemist February 2016

Datatable broken with Scroller, JS data & Bootstrap Nav Tabs

I'm having a weird issue when using jQuery Datatables in combination with bootstrap navigation tab panes. The problem only seems to occur with a combination of these 3 things:

  1. When the data source is local JS, not from from Ajax call
  2. When using the DataTables Scroller to replace pagination
  3. When the table is inside a parent with css display:none when the data is loaded

Any 2 out of the 3 and the data is there, but with all 3, its missing data and Showing NaN to x of x entries (or Showing NaN to -Infinity of x entries with scrollCollapse: true) in the result set message.

Ive already tried using .DataTable().columns.adjust().draw(); to update the table when the parent tab becomes active but that only seems to work for redrawing column widths, not when the data is missing.

Here is a JS Fiddle if you prefer to the SO demo.

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://maxc        

Answers


Gyrocode.com February 2016

SOLUTION

See scroller.measure() function that should be used to recalculate the cached measurements that Scroller uses when table is initially hidden.

Use the following code:

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

DEMO

See this jsFiddle for code and demonstration.

LINKS

See jQuery DataTables – Column width issues with Bootstrap tabs for solution to the most common problems with jQuery DataTables and Bootstrap Tabs.

Post Status

Asked in February 2016
Viewed 1,472 times
Voted 7
Answered 1 times

Search




Leave an answer