---
{
	"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>
	<div lang="en">
		<h2>Evaluation and report</h2>
		<ul>
			<li>Accessibility pre-assessment #1
				<ul>
					<li><a href="../../../demos/tables/reports/a11y-1-en.html" hreflang="en"><span class="wb-inv">Pre-assessment #1</span> English report</a></li>
					<li><a href="../../../demos/tables/reports/a11y-1-fr.html" hreflang="fr"><span class="wb-inv">Pre-assessment #1</span> French report</a></li>
				</ul>
			</li>
			<li>Accessibility assessment #1
				<ul>
					<li><a href="../../../demos/tables/reports/a11y-2-en.html" hreflang="en"><span class="wb-inv">Assessment #1</span> English report</a></li>
					<li><a href="../../../demos/tables/reports/a11y-2-fr.html" hreflang="fr"><span class="wb-inv">Assessment #1</span> French report</a></li>
				</ul>
			</li>
		</ul>
	</div>
</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>

<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>
	<p>To filter a table using the filter's exact value, add the attribute <code>data-exact="true"</code> to the filter. For example: <code>&lt;select class="form-control" id="filterName" name="filterName" data-column="0" data-exact="true">&lt;/select></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>
