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

<css lib="datatables" />
<js lib="jquery" />
<js lib="datatables" />

<title>Form inputs</title>
<js><![CDATA[

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

	$('button').click( function() {
		var data = table.$('input, select').serialize();
		alert(
			"The following data would have been submitted to the server: \n\n"+
			data.substr( 0, 120 )+'...'
		);
		return false;
	} );
} );

]]></js>

<info><![CDATA[

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 `dt-api $()` method can be used to get nodes from the document regardless of paging, ordering etc. This example shows `dt-api $()` being used to get all `tag 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](//editor.datatables.net) which provides simple setup and complete integration with DataTables.

]]></info>

<demo-html>
	<button type="submit">Submit form</button>
</demo-html>

</dt-example>
