DataTables with form elements example

Preamble

The following example shows how form elements can be used within a DataTables enhanced table. The trick here is that DataTables does not include the DOM elements which are not currently being displayed, therefore you need to add a submit event handler to gather together all of the input elements from the table, and then use the handy jQuery serialize() function to string together the data. It can then be posted to the server as you wish.

Live example

Show entries
Search:
Rendering engineBrowserPlatform(s)Engine versionCSS gradeCheck
Rendering engineBrowserPlatform(s)Engine versionCSS gradeCheck
Gecko Firefox 1.0 Win 98+ / OSX.2+ 1.7 A
Gecko Firefox 1.5 Win 98+ / OSX.2+ 1.8 A
Gecko Firefox 2.0 Win 98+ / OSX.2+ 1.8 A
Gecko Firefox 3.0 Win 2k+ / OSX.3+ 1.9 A
Gecko Camino 1.0 OSX.2+ 1.8 A
Gecko Camino 1.5 OSX.3+ 1.8 A
Gecko Netscape 7.2 Win 95+ / Mac OS 8.6-9.2 1.7 A
Gecko Netscape Browser 8 Win 98SE+ 1.7 A
Gecko Netscape Navigator 9 Win 98+ / OSX.2+ 1.8 A
Gecko Mozilla 1.0 Win 95+ / OSX.1+ 1 A
Showing 1 to 10 of 57 entries

Initialisation code

var oTable;

$(document).ready(function() {
	$('#form').submit( function() {
		var sData = $('input', oTable.fnGetNodes()).serialize();
		alert( "The following data would have been submitted to the server: \n\n"+sData );
		return false;
	} );
	
	oTable = $('#example').dataTable();
} );

Other examples