Footer callback

Through the use of the header and footer callback manipulation functions provided by DataTables (headerCallback and 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 column().data() API method and column().footer() for writing the value into the footer.

First name	Last name	Position	Office	Salary
Tiger	Nixon	System Architect	Edinburgh	$320,800
Garrett	Winters	Accountant	Tokyo	$170,750
Ashton	Cox	Junior Technical Author	San Francisco	$86,000
Cedric	Kelly	Senior Javascript Developer	Edinburgh	$433,060
Airi	Satou	Accountant	Tokyo	$162,700
Brielle	Williamson	Integration Specialist	New York	$372,000
Herrod	Chandler	Sales Assistant	San Francisco	$137,500
Rhona	Davidson	Integration Specialist	Tokyo	$327,900
Colleen	Hurst	Javascript Developer	San Francisco	$205,500
Sonya	Frost	Software Engineer	Edinburgh	$103,600
Jena	Gaines	Office Manager	London	$90,560
Quinn	Flynn	Support Lead	Edinburgh	$342,000
Charde	Marshall	Regional Director	San Francisco	$470,600
Haley	Kennedy	Senior Marketing Designer	London	$313,500
Tatyana	Fitzpatrick	Regional Director	London	$385,750
Michael	Silva	Marketing Designer	London	$198,500
Paul	Byrd	Chief Financial Officer (CFO)	New York	$725,000
Gloria	Little	Systems Administrator	New York	$237,500
Bradley	Greer	Software Engineer	London	$132,000
Dai	Rios	Personnel Lead	Edinburgh	$217,500
Jenette	Caldwell	Development Lead	New York	$345,000
Yuri	Berry	Chief Marketing Officer (CMO)	New York	$675,000
Caesar	Vance	Pre-Sales Support	New York	$106,450
Doris	Wilder	Sales Assistant	Sydney	$85,600
Angelica	Ramos	Chief Executive Officer (CEO)	London	$1,200,000
Gavin	Joyce	Developer	Edinburgh	$92,575
Jennifer	Chang	Regional Director	Singapore	$357,650
Brenden	Wagner	Software Engineer	San Francisco	$206,850
Fiona	Green	Chief Operating Officer (COO)	San Francisco	$850,000
Shou	Itou	Regional Marketing	Tokyo	$163,000
Michelle	House	Integration Specialist	Sydney	$95,400
Suki	Burks	Developer	London	$114,500
Prescott	Bartlett	Technical Author	London	$145,000
Gavin	Cortez	Team Leader	San Francisco	$235,500
Martena	Mccray	Post-Sales support	Edinburgh	$324,050
Unity	Butler	Marketing Designer	San Francisco	$85,675
Howard	Hatfield	Office Manager	San Francisco	$164,500
Hope	Fuentes	Secretary	San Francisco	$109,850
Vivian	Harrell	Financial Controller	San Francisco	$452,500
Timothy	Mooney	Office Manager	London	$136,200
Jackson	Bradshaw	Director	New York	$645,750
Olivia	Liang	Support Engineer	Singapore	$234,500
Bruno	Nash	Software Engineer	London	$163,500
Sakura	Yamamoto	Support Engineer	Tokyo	$139,575
Thor	Walton	Developer	New York	$98,540
Finn	Camacho	Support Engineer	San Francisco	$87,500
Serge	Baldwin	Data Coordinator	Singapore	$138,575
Zenaida	Frank	Software Engineer	New York	$125,250
Zorita	Serrano	Software Engineer	San Francisco	$115,000
Jennifer	Acosta	Junior Javascript Developer	Edinburgh	$75,650
Cara	Stevens	Sales Assistant	New York	$145,600
Hermione	Butler	Regional Director	London	$356,250
Lael	Greer	Systems Administrator	London	$103,500
Jonas	Alexander	Developer	San Francisco	$86,500
Shad	Decker	Regional Director	Edinburgh	$183,000
Michael	Bruce	Javascript Developer	Singapore	$183,000
Donna	Snider	Customer Support	New York	$112,000
Total:

Javascript
HTML
CSS
Ajax
Server-side script
Comments

The Javascript shown below is used to initialise the table shown in this example:

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

		// 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)'
		);
	}
});

new DataTable('#example', {
	footerCallback: function (row, data, start, end, display) {
		let api = this.api();

		// Remove the formatting to get integer data for summation
		let 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((a, b) => intVal(a) + intVal(b), 0);

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

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

In addition to the above code, the following Javascript library files are loaded for use in this example:

The HTML shown below is the raw HTML table element, before it has been enhanced by DataTables:

This example uses a little bit of additional CSS beyond what is loaded from the library files (below), in order to correctly display the table. The additional CSS used is shown below:

th { white-space: nowrap; }

The following CSS library files are loaded for use in this example to provide the styling of the table:

This table loads data by Ajax. The latest data that has been loaded is shown below. This data will update automatically as any additional data is loaded.

The script used to perform the server-side processing for this table is shown below. Please note that this is just an example script using PHP. Server-side processing scripts can be written in any language, using the protocol described in the DataTables documentation.

Footer callback

Other examples

Basic initialisation

Advanced initialisation

Data sources

Language and Internationalisation

DateTime

Plug-ins

Styling

Layout

API

Ajax

Server-side

DataTables