rooty/DataTables
1
0
Fork 0
mirror of https://github.com/DataTables/DataTables.git synced 2025-03-15 16:29:16 +01:00
Code Issues Releases Activity

Docs: Improve the documentation of smart filtering in DataTables

Browse Source 
* 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
This commit is contained in:
Allan Jardine 2014-06-05 09:37:07 +01:00
parent c6619c64f9
commit 429feaad86
3 changed files with 39 additions and 16 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
.datatables-commit-sync
View File

@ -1 +1 @@
37dd3d0ac908239527d4946e5b4c994ceb982fbc
9ba4130c47db42b98a39a3d8cc8c8a40f0828529

40
examples/api/multi_filter.html
View File

@ -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

13
examples/api/multi_filter_select.html
View File

@ -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();
} );