<?xml version="1.0" encoding="UTF-8" ?>
<dt-example table-type="html" order="5">

<css lib="datatables fixedheader" />
<js lib="jquery datatables fixedheader">
<![CDATA[
$(document).ready(function() {
	var table = $('#example').DataTable( {
		fixedHeader: true
	} );

	var visible = true;
	var tableContainer = $(table.table().container());

	$('#toggle').on( 'click', function () {
		tableContainer.css( 'display', visible ? 'none' : 'block' );
		table.fixedHeader.adjust();

		visible = ! visible;
	} );
} );
]]>
</js>

<title lib="FixedHeader">Enable / disable FixedHeader</title>

<info><![CDATA[

This example shows how FixedHeader can be enabled and disabled using the `fh-api fixedHeader.update()` API method. This is can be particularly useful if FixedHeader is used for DataTables that are enclosed in tabs, so the header is disabled when the tab containing it is not visible, and also to then realign the FixedHeader when the table is then made visible again.

This example shows a simple toggle button that will change the visibility of the DataTable. The `fh-api fixedHeader.update()` method is called whenever the table's visibility is changed, as it would be in a tab show event handler.

]]></info>

<demo-html>
	<button id="toggle">Toggle table visibility</button>
</demo-html>

</dt-example>

<?xml version="1.0" encoding="UTF-8" ?>
<dt-example table-type="html" order="5">

<css lib="datatables fixedheader" />
<js lib="jquery datatables fixedheader">
<![CDATA[
$(document).ready(function() {
	var table = $('#example').DataTable( {
		fixedHeader: true
	} );

	var visible = true;
	var tableContainer = $(table.table().container());

	$('#toggle').on( 'click', function () {
		tableContainer.css( 'display', visible ? 'none' : 'block' );
		table.fixedHeader.adjust();

		visible = ! visible;
	} );
} );
]]>
</js>

<title lib="FixedHeader">Enable / disable FixedHeader</title>

<info><![CDATA[

This example shows how FixedHeader can be enabled and disabled using the `fh-api fixedHeader.adjust()` API method. This is can be particularly useful if FixedHeader is used for DataTables that are enclosed in tabs, so the header is disabled when the tab containing it is not visible, and also to then realign the FixedHeader when the table is then made visible again.

This example shows a simple toggle button that will change the visibility of the DataTable. The `fh-api fixedHeader.adjust()` method is called whenever the table's visibility is changed, as it would be in a tab show event handler.

]]></info>

<demo-html>
	<button id="toggle">Toggle table visibility</button>
</demo-html>

</dt-example>

Fix example: Link to `fh-api fixedHeader.adjust()` documentation was wrong
Fix example: Link to `fh-api fixedHeader.adjust()` documentation was wrong
