---
{
	"title": "Tables",
	"language": "en",
	"category": "Plugins",
	"categoryfile": "plugins",
	"description": "Integrates the DataTables plugin into WET providing searching, sorting, filtering, pagination and other advanced features for tables.",
	"altLangPrefix": "tables",
	"dateModified": "2014-10-28"}
---
<span class="wb-prettify all-pre hide"></span>

<section>
	<h2>Purpose</h2>
	<p>Integrates the DataTables plugin into WET providing searching, sorting, filtering, pagination and other advanced features for tables.</p>
</section>

<section>
	<h2>Use when</h2>
	<p>Displaying large tables, to ease searching, sorting and filtering of information.</p>
</section>

<section>
	<h2>Working example</h2>
	<ul>
		<li><a href="../../../demos/tables/tables-en.html">English example</a></li>
		<li><a href="../../../demos/tables/tables-fr.html">French example</a></li>
	</ul>
</section>

<section>
	<h2>How to implement</h2>

	<section>
		<h3>DataTables</h3>
		<ol>
			<li>Add class <code>wb-tables</code> to the table tag of the table you wish to enhance.</li>
			<li>Modify the default configuration by passing a JSON array through the <code>data-wb-tables</code> attribute of the table tag.</li>
		</ol>
		<pre><code>&lt;table class="wb-tables table table-striped table-hover" data-wb-tables='{ "ordering" : false }'&gt;</code></pre>
	</section>

	<section>
		<h3 id="advopt">Advanced Options</h3>
		<p>Allows the user to change how checkboxes are filtered.</p>
		<ol>
			<li>Add <code>data-aopts='{"type": "", "column": ""}'</code> arrtibute to any checkbox element to apply the advanced options.</li>
			<li>
				Available filter types:
				<ol>
					<li>ANY - This option will return entries that contain either A or B, or both.</li>
					<li>BOTH - This option will only return entries that contain both A and B.</li>
					<li>EITHER - This option will return all entries that are just A or just B - and not combinations of the two.</li>
					<li>AND - This option will only return entries that are a combination of A or B.</li>
				</ol>
			</li>
			<li>Column is the checkboxes that the filter well apply too (must match there 'data-column').</li>
		</ol>
		<pre><code>&lt;label for="advanced_options1_1"&gt;&lt;input type="radio" name="advanced_options1" id="advanced_options1_1" data-aopts='{"type": "any", "column": "5"}' checked /&gt;Any&lt;/label&gt;</code></pre>
	</section>
</section>

<section>
	<h2>Configuration options</h2>
	<p>All configuration options are detailed in the <a href="https://www.datatables.net/ref">DataTables documentation</a> and is fully accessible via the <code>data-wb-tables</code> attribute or <code>window[ "wb-tables" ]</code>.</p>
</section>

<section>
	<h2>Events</h2>
	<table class="table">
		<thead>
			<tr>
				<th>Event</th>
				<th>Trigger</th>
				<th>What it does</th>
			</tr>
		</thead>
		<tbody>
			<tr>
				<td><code>wb-init.wb-tables</code></td>
				<td>Triggered manually (e.g., <code>$( ".wb-tables" ).trigger( "wb-init.wb-tables" );</code>).</td>
				<td>Used to manually initialize the Tables plugin. <strong>Note:</strong> The Tables plugin will be initialized automatically unless the required markup is added after the page has already loaded.</td>
			</tr>
			<tr>
				<td><code>wb-ready.wb-tables</code> (v4.0.5+)</td>
				<td>Triggered automatically after Data Tables has been initialized.</td>
				<td>Used to identify where Data Tables was initialized (target of the event)
					<pre><code>$( document ).on( "wb-ready.wb-tables", ".wb-tables", function( event ) {
});</code></pre>
					<pre><code>$( ".wb-tables" ).on( "wb-ready.wb-tables", function( event ) {
});</code></pre>
				</td>
			</tr>
			<tr>
				<td><code>wb-updated.wb-tables</code> (v4.0.5+)</td>
				<td>Triggered automatically after a DataTable table was updated (extension of the <code>draw.dt</code> event).</td>
				<td>Used to identify which table was updated (target of the event) and to pass along the DataTables settings object.
					<pre><code>$( document ).on( "wb-updated.wb-tables", ".wb-tables", function( event, settings ) {
});</code></pre>
					<pre><code>$( ".wb-tables" ).on( "wb-updated.wb-tables", function( event, settings ) {
});</code></pre>
				</td>
			</tr>
			<tr>
				<td><code>wb-ready.wb</code> (v4.0.5+)</td>
				<td>Triggered automatically when WET has finished loading and executing.</td>
				<td>Used to identify when all WET plugins and polyfills have finished loading and executing.
					<pre><code>$( document ).on( "wb-ready.wb", function( event ) {
});</code></pre>
				</td>
			</tr>
			<tr>
				<td><code>*.dt</code> events (e.g., <code>xhr.dt</code></td>
				<td>Events triggered automatically by DataTables (<a href="https://datatables.net/reference/event/">documentation on DataTables events</a>.</td>
				<td>Used by DataTables to identify what events are occurring.
					<pre><code>$( document ).on( "xhr.dt", ".wb-tables", function( event ) {
});</code></pre>
					<pre><code>$( ".wb-tables" ).on( "xhr.dt", function( event ) {
});</code></pre>
				</td>
			</tr>
		</tbody>
	</table>
</section>

<section>
	<h2>Source code</h2>
	<p><a href="https://github.com/wet-boew/wet-boew/tree/master/src/plugins/tables">Tables plugin source code on GitHub</a></p>
</section>