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"> <link rel="stylesheet" type="text/css" href="../resources/demo.css">
<style type="text/css" class="init"> <style type="text/css" class="init">
tfoot input {
width: 100%;
padding: 3px;
box-sizing: border-box;
}
</style> </style>
<script type="text/javascript" language="javascript" src="../../media/js/jquery.js"></script> <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> <script type="text/javascript" language="javascript" src="../../media/js/jquery.dataTables.js"></script>
@ -28,13 +34,15 @@ $(document).ready(function() {
// DataTable // DataTable
var table = $('#example').DataTable(); var table = $('#example').DataTable();
// Apply the filter // Apply the filter
$("#example tfoot input").on( 'keyup change', function () { table.columns().eq( 0 ).each( function ( colIdx ) {
table $( 'input', table.column( colIdx ).footer() ).on( 'keyup change', function () {
.column( $(this).parent().index()+':visible' ) table
.search( this.value ) .column( colIdx )
.draw(); .search( this.value )
.draw();
} );
} ); } );
} ); } );
@ -575,13 +583,15 @@ $(document).ready(function() {
// DataTable // DataTable
var table = $('#example').DataTable(); var table = $('#example').DataTable();
// Apply the filter // Apply the filter
$(&quot;#example tfoot input&quot;).on( 'keyup change', function () { table.columns().eq( 0 ).each( function ( colIdx ) {
table $( 'input', table.column( colIdx ).footer() ).on( 'keyup change', function () {
.column( $(this).parent().index()+':visible' ) table
.search( this.value ) .column( colIdx )
.draw(); .search( this.value )
.draw();
} );
} ); } );
} );</code> } );</code>
@ -603,7 +613,11 @@ $(document).ready(function() {
<div> <div>
<p>This example uses a little bit of additional CSS beyond what is loaded from the library <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 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> </div>
<p>The following CSS library files are loaded for use in this example to provide the styling of the <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() ) .appendTo( $(this).empty() )
.on( 'change', function () { .on( 'change', function () {
table.column( i ) table.column( i )
.search( $(this).val() ) .search( '^'+$(this).val()+'$', true, false )
.draw(); .draw();
} ); } );
@ -63,6 +63,15 @@ $(document).ready(function() {
"HTML tag">select</code> input is used to trigger a column search using the <a href= "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.net/reference/api/column().search()"><code class="api" title=
"DataTables API method">column().search()<span>DT</span></code></a> method.</p> "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> </div>
<table id="example" class="display" cellspacing="0" width="100%"> <table id="example" class="display" cellspacing="0" width="100%">
@ -567,7 +576,7 @@ $(document).ready(function() {
.appendTo( $(this).empty() ) .appendTo( $(this).empty() )
.on( 'change', function () { .on( 'change', function () {
table.column( i ) table.column( i )
.search( $(this).val() ) .search( '^'+$(this).val()+'$', true, false )
.draw(); .draw();
} ); } );