-
Notifications
You must be signed in to change notification settings - Fork 660
/
tables-en.hbs
90 lines (83 loc) · 3.2 KB
/
tables-en.hbs
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
---
{
"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-07-30"
}
---
<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>
<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.
<pre><code><table class="wb-tables table table-striped table-hover" data-wb-tables='{ "ordering" : false }'></code></pre>
</li>
</ol>
</section>
<section>
<h2>Configuration options</h2>
<p>All configuration options are detailed in the <a href="http://www.datatables.net/ref">DataTables documentation</a> and is fully accessible via the <code>data-wb-tables</code> attribute.</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>$elm.trigger( "wb-init.wb-inview" );</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 a DataTable table draws.</td>
<td>Used to identify which table was drawn (target of the event) and to pass along the DataTables instance and the settings object.
<pre><code>$( document ).on( "wb-ready.wb-tables", ".wb-tables", function( event, instance, settings ) {
});</code></pre>
<pre><code>$elm.on( "wb-ready.wb-tables", function( event, instance, settings ) {
});</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="http://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>$elm.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>