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

<css lib="datatables">
	tfoot input {
		width: 100%;
		padding: 3px;
		box-sizing: border-box;
	}
</css>
<js lib="jquery" />
<js lib="datatables" />

<title>Individual column searching (text inputs)</title>
<js><![CDATA[

$(document).ready(function() {
	// Setup - add a text input to each footer cell
	$('#example tfoot th').each( function () {
		var title = $(this).text();
		$(this).html( '<input type="text" placeholder="Search '+title+'" />' );
	} );

	// DataTable
	var table = $('#example').DataTable();

	// Apply the search
	table.columns().every( function () {
		var that = this;

		$( 'input', this.footer() ).on( 'keyup change clear', function () {
			if ( that.search() !== this.value ) {
				that
					.search( this.value )
					.draw();
			}
		} );
	} );
} );

]]></js>

<info><![CDATA[

The searching functionality provided by DataTables is useful for quickly search through the information in the table - however the search is global, and you may wish to present controls that search on specific columns.

DataTables has the ability to apply searching to a specific column through the `dt-api column().search()` method (note that the name of the method is `search` not `filter`, since `dt-api filter()` is used to apply a filter to a result set).

The column searches are cumulative, so you can apply multiple individual column searches, in addition to the global search, allowing complex searching options to be presented to the user.

This examples shows text elements being used with the `dt-api column().search()` method to add input controls in the footer of the table for each column. Note that the `*index*:visible` option is used for the column selector to ensure that the `dt-api column()` method takes into account any hidden columns when selecting the column to act upon.

]]></info>

</dt-example>
