Form inputs

In order to perform paging, ordering, searching etc, DataTables can remove rows and cells from the document (i.e. those rows / cells which are not needed are not inserted into the document). This increases performance and compatibility, however, it means that submitting forms which span multiple pages requires a little bit of additional work to get the information that is not in the document any longer.

The $() method can be used to get nodes from the document regardless of paging, ordering etc. This example shows $() being used to get all input elements from the table. In the example a simple alert() is used to show the information from the form, but an Ajax call to the server with the form data could easily be performed.

If you are interested in a complete CRUD editing suit for DataTables have a look at the Editor extension which provides simple setup and complete integration with DataTables.

Name	Age	Position	Office
Tiger Nixon
Garrett Winters
Ashton Cox
Cedric Kelly
Airi Satou
Brielle Williamson
Herrod Chandler
Rhona Davidson
Colleen Hurst
Sonya Frost
Jena Gaines
Quinn Flynn
Charde Marshall
Haley Kennedy
Tatyana Fitzpatrick
Michael Silva
Paul Byrd
Gloria Little
Bradley Greer
Dai Rios
Jenette Caldwell
Yuri Berry
Caesar Vance
Doris Wilder
Angelica Ramos
Gavin Joyce
Jennifer Chang
Brenden Wagner
Fiona Green
Shou Itou
Michelle House
Suki Burks
Prescott Bartlett
Gavin Cortez
Martena Mccray
Unity Butler
Howard Hatfield
Hope Fuentes
Vivian Harrell
Timothy Mooney
Jackson Bradshaw
Olivia Liang
Bruno Nash
Sakura Yamamoto
Thor Walton
Finn Camacho
Serge Baldwin
Zenaida Frank
Zorita Serrano
Jennifer Acosta
Cara Stevens
Hermione Butler
Lael Greer
Jonas Alexander
Shad Decker
Michael Bruce
Donna Snider
Name	Age	Position	Office

Javascript
HTML
CSS
Ajax
Server-side script
Comments

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

var table = $('#example').DataTable({
	columnDefs: [
		{
			orderable: false,
			targets: [1, 2, 3]
		}
	]
});

$('#submit').on('click', function (e) {
	e.preventDefault();

	var data = table.$('input, select').serialize();

	alert(
		'The following data would have been submitted to the server: \n\n' +
			data.substr(0, 120) +
			'...'
	);
});

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:

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.

Form inputs

Other examples

Basic initialisation

Advanced initialisation

Data sources

Language and Internationalisation

DateTime

Plug-ins

Styling

Layout

API

Ajax

Server-side

DataTables