78 lines
3.7 KiB
HTML
Executable File
78 lines
3.7 KiB
HTML
Executable File
|
|
<h2>Filtering plug-in functions</h2>
|
|
|
|
<p>The filtering plug-in options that DataTables provides are remarkably powerful, and and let you set almost any filtering criterion you wish for user based input. A couple of things to note for filtering, firstly you will likely need to customise the filtering presented on this page to match your specific needs. Secondly, if you are using server-side processing, DataTables doesn't do any client-side filtering, so these plug-ins will not have any effect (with server-side processing, all data manipulation is done by the server - so you would need to implement these filters there).</p>
|
|
|
|
<p>DataTables supports two different kinds of plug-in filtering methods:</p>
|
|
|
|
<ul>
|
|
<li>Type based column filtering - filtering based on the sType of the column.
|
|
<ul style="font-size:1em;">
|
|
<li><a href="#how_to_type_based">How to use DataTables plug-in column type based filtering</a></li>
|
|
<li><a href="#functions_type_based">Plug-in column type based filtering</a></li>
|
|
</ul>
|
|
</li>
|
|
<li>Row based filtering - filtering applied to the data from the whole row.
|
|
<ul style="font-size:1em;">
|
|
<li><a href="#how_to">How to use DataTables plug-in row filtering functions</a></li>
|
|
<li><a href="#functions">Plug-in row filtering functions</a></li>
|
|
</ul>
|
|
</li>
|
|
</ul>
|
|
|
|
|
|
<a name="how_to"></a>
|
|
<h3>How to use DataTables plug-in column type based filtering</h3>
|
|
|
|
<p>To make use of the column (type) based filtering plug-in functions below, you need to include it in the Javascript available for your page, after you load the DataTables library, but before you initialise the DataTable. You must also set the column type for the column(s) that you wish to apply the filter to using <a href="/usage/columns#sType">sType</a>.</p>
|
|
|
|
<pre class="brush: html"><script type="text/javascript" src="jquery.dataTables.js"></script>
|
|
<script type="text/javascript" src="dataTables.htmlColumnFilter.js"></script>
|
|
<script type="text/javascript">
|
|
$(document).ready(function() {
|
|
var oTable = $('#example').dataTable({
|
|
"aoColumns": [
|
|
"sType": "html",
|
|
null
|
|
]
|
|
});
|
|
} );
|
|
</script>
|
|
</pre>
|
|
|
|
|
|
<a name="functions"></a>
|
|
<h3>Plug-in column type filtering functions</h3>
|
|
|
|
include(`build.1.inc')
|
|
|
|
|
|
|
|
<a name="how_to"></a>
|
|
<h3>How to use DataTables plug-in row filtering functions</h3>
|
|
|
|
<p>To add the functionality provided by the filtering functions below, you simply need to include it in the Javascript available for your page, after you load the DataTables library, but before you initialise the DataTable. These filters are global and will be applied whenever DataTables applies it's own filtering (for details please see the <a href="/development/filtering#global_filters">filters development page</a>).</p>
|
|
|
|
<p>In the following example the <a href="#range_numbers">range filtering (numbers)</a> plug-in is saved to a file, and used in the DataTable which is initialised. Note also that event listeners are applied to the two inputs, which will cause the table to redraw, and thus filter the new data (<a href="/examples/plug-ins/range_filtering.html">live example</a>):</p>
|
|
|
|
<pre class="brush: html"><script type="text/javascript" src="jquery.dataTables.js"></script>
|
|
<script type="text/javascript" src="dataTables.rangeFilter.js"></script>
|
|
<script type="text/javascript">
|
|
$(document).ready(function() {
|
|
var oTable = $('#example').dataTable();
|
|
|
|
/* Add event listeners to the two range filtering inputs */
|
|
$('#min').keyup( function() { oTable.fnDraw(); } );
|
|
$('#max').keyup( function() { oTable.fnDraw(); } );
|
|
} );
|
|
</script>
|
|
</pre>
|
|
|
|
|
|
<a name="functions"></a>
|
|
<h3>Plug-in row filtering functions</h3>
|
|
|
|
|
|
include(`build.2.inc')
|
|
|