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

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

<title>Search API (regular expressions)</title>
<js><![CDATA[

function filterGlobal () {
	$('#example').DataTable().search( 
		$('#global_filter').val(),
		$('#global_regex').prop('checked'), 
		$('#global_smart').prop('checked')
	).draw();
}

function filterColumn ( i ) {
	$('#example').DataTable().column( i ).search( 
		$('#col'+i+'_filter').val(),
		$('#col'+i+'_regex').prop('checked'), 
		$('#col'+i+'_smart').prop('checked')
	).draw();
}

$(document).ready(function() {
	$('#example').DataTable();

	$('input.global_filter').on( 'keyup click', function () {
		filterGlobal();
	} );

	$('input.column_filter').on( 'keyup click', function () {
		filterColumn( $(this).parents('tr').attr('data-column') );
	} );
} );

]]></js>

<info><![CDATA[

Searching a table is one of the most common user interactions with a DataTables table, and DataTables provides a number of methods for you to control this interaction. There are APIs for the global search (`dt-api search()`) and for each individual column (`dt-api column().search()`).

Note also that you must call the `dt-api draw()` method after performing the search, in order for the results to be displayed.

Each search (global or column) can be marked as a regular expression (allowing you to create very complex interactions) and as a smart search or not. When smart searching is enabled on a particular search, DataTables will modify the user input string to a complex regular expression which can make searching more intuitive.

This example allows you to "play" with the various searching options that DataTables provides.

]]></info>

<demo-html>
	<table cellpadding="3" cellspacing="0" border="0" style="width: 67%; margin: 0 auto 2em auto;">
		<thead>
			<tr>
				<th>Target</th>
				<th>Search text</th>
				<th>Treat as regex</th>
				<th>Use smart search</th>
			</tr>
		</thead>
		<tbody>
			<tr id="filter_global">
				<td>Global search</td>
				<td align="center"><input type="text"     class="global_filter" id="global_filter" /></td>
				<td align="center"><input type="checkbox" class="global_filter" id="global_regex" /></td>
				<td align="center"><input type="checkbox" class="global_filter" id="global_smart" checked="checked" /></td>
			</tr>
			<tr id="filter_col1" data-column="0">
				<td>Column - Name</td>
				<td align="center"><input type="text"     class="column_filter" id="col0_filter" /></td>
				<td align="center"><input type="checkbox" class="column_filter" id="col0_regex" /></td>
				<td align="center"><input type="checkbox" class="column_filter" id="col0_smart" checked="checked" /></td>
			</tr>
			<tr id="filter_col2" data-column="1">
				<td>Column - Position</td>
				<td align="center"><input type="text"     class="column_filter" id="col1_filter" /></td>
				<td align="center"><input type="checkbox" class="column_filter" id="col1_regex" /></td>
				<td align="center"><input type="checkbox" class="column_filter" id="col1_smart" checked="checked" /></td>
			</tr>
			<tr id="filter_col3" data-column="2">
				<td>Column - Office</td>
				<td align="center"><input type="text"     class="column_filter" id="col2_filter" /></td>
				<td align="center"><input type="checkbox" class="column_filter" id="col2_regex" /></td>
				<td align="center"><input type="checkbox" class="column_filter" id="col2_smart" checked="checked" /></td>
			</tr>
			<tr id="filter_col4" data-column="3">
				<td>Column - Age</td>
				<td align="center"><input type="text"     class="column_filter" id="col3_filter" /></td>
				<td align="center"><input type="checkbox" class="column_filter" id="col3_regex" /></td>
				<td align="center"><input type="checkbox" class="column_filter" id="col3_smart" checked="checked" /></td>
			</tr>
			<tr id="filter_col5" data-column="4">
				<td>Column - Start date</td>
				<td align="center"><input type="text"     class="column_filter" id="col4_filter" /></td>
				<td align="center"><input type="checkbox" class="column_filter" id="col4_regex" /></td>
				<td align="center"><input type="checkbox" class="column_filter" id="col4_smart" checked="checked" /></td>
			</tr>
			<tr id="filter_col6" data-column="5">
				<td>Column - Salary</td>
				<td align="center"><input type="text"     class="column_filter" id="col5_filter" /></td>
				<td align="center"><input type="checkbox" class="column_filter" id="col5_regex" /></td>
				<td align="center"><input type="checkbox" class="column_filter" id="col5_smart" checked="checked" /></td>
			</tr>
		</tbody>
	</table>
</demo-html>

</dt-example>
