From 429feaad8615e8c63d808ecb05052bea6ecde45d Mon Sep 17 00:00:00 2001
From: Allan Jardine <allan.jardine@sprymedia.co.uk>
Date: Thu, 5 Jun 2014 09:37:07 +0100
Subject: [PATCH] Docs: Improve the documentation of smart filtering in
 DataTables

* Explain what smart filtering is
* How it can effect passed in regular expressions
* Improve column().search() examples to show one with smart filtering
  and one with exact matching.
* API examples updated to match the examples given in the documentation
* This fixes DataTables/DataTables #344
---
 .datatables-commit-sync               |  2 +-
 examples/api/multi_filter.html        | 40 ++++++++++++++++++---------
 examples/api/multi_filter_select.html | 13 +++++++--
 3 files changed, 39 insertions(+), 16 deletions(-)

diff --git a/.datatables-commit-sync b/.datatables-commit-sync
index 05f64964..5b56166c 100644
--- a/.datatables-commit-sync
+++ b/.datatables-commit-sync
@@ -1 +1 @@
-37dd3d0ac908239527d4946e5b4c994ceb982fbc
+9ba4130c47db42b98a39a3d8cc8c8a40f0828529
diff --git a/examples/api/multi_filter.html b/examples/api/multi_filter.html
index 7db805b2..f0971573 100644
--- a/examples/api/multi_filter.html
+++ b/examples/api/multi_filter.html
@@ -11,6 +11,12 @@
 	<link rel="stylesheet" type="text/css" href="../resources/demo.css">
 	<style type="text/css" class="init">
 
+	tfoot input {
+		width: 100%;
+		padding: 3px;
+		box-sizing: border-box;
+	}
+
 	</style>
 	<script type="text/javascript" language="javascript" src="../../media/js/jquery.js"></script>
 	<script type="text/javascript" language="javascript" src="../../media/js/jquery.dataTables.js"></script>
@@ -28,13 +34,15 @@ $(document).ready(function() {
 
 	// DataTable
 	var table = $('#example').DataTable();
-	
+
 	// Apply the filter
-	$("#example tfoot input").on( 'keyup change', function () {
-		table
-			.column( $(this).parent().index()+':visible' )
-			.search( this.value )
-			.draw();
+	table.columns().eq( 0 ).each( function ( colIdx ) {
+		$( 'input', table.column( colIdx ).footer() ).on( 'keyup change', function () {
+			table
+				.column( colIdx )
+				.search( this.value )
+				.draw();
+		} );
 	} );
 } );
 
@@ -575,13 +583,15 @@ $(document).ready(function() {
 
 	// DataTable
 	var table = $('#example').DataTable();
-	
+
 	// Apply the filter
-	$(&quot;#example tfoot input&quot;).on( 'keyup change', function () {
-		table
-			.column( $(this).parent().index()+':visible' )
-			.search( this.value )
-			.draw();
+	table.columns().eq( 0 ).each( function ( colIdx ) {
+		$( 'input', table.column( colIdx ).footer() ).on( 'keyup change', function () {
+			table
+				.column( colIdx )
+				.search( this.value )
+				.draw();
+		} );
 	} );
 } );</code>
 
@@ -603,7 +613,11 @@ $(document).ready(function() {
 					<div>
 						<p>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:</p><code class="multiline brush: js;"></code>
+						below:</p><code class="multiline brush: js;">tfoot input {
+		width: 100%;
+		padding: 3px;
+		box-sizing: border-box;
+	}</code>
 					</div>
 
 					<p>The following CSS library files are loaded for use in this example to provide the styling of the
diff --git a/examples/api/multi_filter_select.html b/examples/api/multi_filter_select.html
index 7b5e182a..9e6466e2 100644
--- a/examples/api/multi_filter_select.html
+++ b/examples/api/multi_filter_select.html
@@ -27,7 +27,7 @@ $(document).ready(function() {
 			.appendTo( $(this).empty() )
 			.on( 'change', function () {
 				table.column( i )
-					.search( $(this).val() )
+					.search( '^'+$(this).val()+'$', true, false )
 					.draw();
 			} );
 
@@ -63,6 +63,15 @@ $(document).ready(function() {
 				"HTML tag">select</code> input is used to trigger a column search using the <a href=
 				"//datatables.net/reference/api/column().search()"><code class="api" title=
 				"DataTables API method">column().search()<span>DT</span></code></a> method.</p>
+
+				<p>Note that the <a href="//datatables.net/reference/api/column().search()"><code class="api" title=
+				"DataTables API method">column().search()<span>DT</span></code></a> method in this particular case
+				performs an exact match through the use of a custom regular expression and disabling DataTables built
+				in smart searching. For more information on the search options in DataTables API please refer to the
+				documentation for <a href="//datatables.net/reference/api/search()"><code class="api" title=
+				"DataTables API method">search()<span>DT</span></code></a> and <a href=
+				"//datatables.net/reference/api/column().search()"><code class="api" title=
+				"DataTables API method">column().search()<span>DT</span></code></a>.</p>
 			</div>
 
 			<table id="example" class="display" cellspacing="0" width="100%">
@@ -567,7 +576,7 @@ $(document).ready(function() {
 			.appendTo( $(this).empty() )
 			.on( 'change', function () {
 				table.column( i )
-					.search( $(this).val() )
+					.search( '^'+$(this).val()+'$', true, false )
 					.draw();
 			} );