footerCallback

Since: DataTables 1.10

Footer display callback function.

Description

Identical to headerCallback but for the table footer this function allows you to modify the table footer on every 'draw' event.

Note that if the table does not have a tfoot element, it this callback will not be fired.

Type

function footerCallback( tr, data, start, end, display )

Parameters:

	Name	Type	Optional
1	`tr`	`node`	No
	The element for the first row in the footer (e.g. a `tr`). With DataTables 2's support for multiple rows in the table footer, if you require the `tfoot` to access the other rows, use `tr.parentNode`.
2	`data`	`array`	No
	Full data array of the table. Note that this is in data index order. Use the `display` parameter for the current display order.
3	`start`	`integer`	No
	Index for the current display starting point in the display array
4	`end`	`integer`	No
	Index for the current display ending point in the display array
5	`display`	`array`	No
	Index array to translate the visual position to the full data array

Examples

Alter the content of the footer on callback:

new DataTable('#myTable', {
	footerCallback: function (tr, data, start, end, display) {
		$(tr)
			.find('th')
			.eq(0)
			.html('Starting index is ' + start);
	}
});

Use the API to sum a specific column and output:

new DataTable('#myTable', {
	footerCallback: function (tr, data, start, end, display) {
		var api = this.api();
		$(api.column(5).footer()).html(
			api
				.column(5)
				.data()
				.reduce(function (a, b) {
					return a + b;
				}, 0)
		);
	}
});

The following options are directly related and may also be useful in your application development.

API

Options

footerCallback

Description

Type

function footerCallback( tr, data, start, end, display )

Examples

Related

DataTables