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

<css lib="datatables">
	th { white-space: nowrap; }
</css>
<js lib="jquery" />
<js lib="datatables" />

<title>Footer callback</title>
<js><![CDATA[

$(document).ready(function() {
	$('#example').DataTable( {
		"footerCallback": function ( row, data, start, end, display ) {
			var api = this.api(), data;

			// Remove the formatting to get integer data for summation
			var intVal = function ( i ) {
				return typeof i === 'string' ?
					i.replace(/[\$,]/g, '')*1 :
					typeof i === 'number' ?
						i : 0;
			};

			// Total over all pages
			total = api
				.column( 4 )
				.data()
				.reduce( function (a, b) {
					return intVal(a) + intVal(b);
				}, 0 );

			// Total over this page
			pageTotal = api
				.column( 4, { page: 'current'} )
				.data()
				.reduce( function (a, b) {
					return intVal(a) + intVal(b);
				}, 0 );

			// Update footer
			$( api.column( 4 ).footer() ).html(
				'$'+pageTotal +' ( $'+ total +' total)'
			);
		}
	} );
} );

]]></js>

<info><![CDATA[

Through the use of the header and footer callback manipulation functions provided by DataTables (`dt-init headerCallback` and `dt-init footerCallback`), it is possible to perform some powerful and useful data manipulation functions, such as summarising data in the table.

The example below shows a footer callback being used to total the data for a column (both the visible and the hidden data) using the `dt-api column().data()` API method and `dt-api column().footer()` for writing the value into the footer.

]]></info>

</dt-example>
