General Actions:
Table Sorter
Last modified by Thomas Mortagne on 2012/07/21 12:42
 | Turns basic tables in advanced tables featuring filters and sorting |
| Type | Snippet |
| Developed by | |
| License | GNU Lesser General Public License 2.1 |
Table of contents
Description
It works the following way:
- You write a basic table in html or wiki syntax
- You set its class as "grid sortable filterable doOddEven"
- You set the header row class as "sortHeader"
- You can change the filter type of a column by setting its class to "selectFilter"
- Do not forget to close all your table elements properly :-)
Code (xwiki/2.0 syntax using wiki syntax for the table)
{{velocity}}
$xwiki.jsfx.use("js/xwiki/table/tablefilterNsort.js")
$xwiki.ssfx.use("js/xwiki/table/table.css")
{{/velocity}}
(% class="grid sortable filterable doOddEven" id="clientList" %)
|=Header 1|=Header 2|=Header 3
|Content of row 1, column 1|Content of row 1, column 2 (using wiki syntax for the table, a select in the header is not possible|Content of row 1, column 3
$xwiki.jsfx.use("js/xwiki/table/tablefilterNsort.js")
$xwiki.ssfx.use("js/xwiki/table/table.css")
{{/velocity}}
(% class="grid sortable filterable doOddEven" id="clientList" %)
|=Header 1|=Header 2|=Header 3
|Content of row 1, column 1|Content of row 1, column 2 (using wiki syntax for the table, a select in the header is not possible|Content of row 1, column 3
Code (xwiki/2.0 syntax using html for the table)
{{velocity}}
$xwiki.jsfx.use("js/xwiki/table/tablefilterNsort.js")
$xwiki.ssfx.use("js/xwiki/table/table.css")
{{/velocity}}
{{html}}
<table id="ChooseYourTableID" class="grid sortable filterable doOddEven" cellpadding="0" cellspacing="0" border="0">
<tr class="sortHeader">
<th>Header 1</th>
<th class="selectFilter">Header 2 with a select filter</th>
<th>Header 3</th>
</tr>
<tr>
<td>Content of row 1, column 1</td>
<td>Content of row 1, column 2</td>
<td>Content of row 1, column 3</td>
</tr>
</table>
{{/html}}
$xwiki.jsfx.use("js/xwiki/table/tablefilterNsort.js")
$xwiki.ssfx.use("js/xwiki/table/table.css")
{{/velocity}}
{{html}}
<table id="ChooseYourTableID" class="grid sortable filterable doOddEven" cellpadding="0" cellspacing="0" border="0">
<tr class="sortHeader">
<th>Header 1</th>
<th class="selectFilter">Header 2 with a select filter</th>
<th>Header 3</th>
</tr>
<tr>
<td>Content of row 1, column 1</td>
<td>Content of row 1, column 2</td>
<td>Content of row 1, column 3</td>
</tr>
</table>
{{/html}}
Code (xwiki/1.0 syntax using html for the table)
$xwiki.jsfx.use("js/xwiki/table/tablefilterNsort.js")
$xwiki.ssfx.use("js/xwiki/table/table.css")
<table id="ChooseYourTableID" class="grid sortable filterable doOddEven" cellpadding="0" cellspacing="0" border="0">
<tr class="sortHeader">
<th>Header 1</th>
<th class="selectFilter">Header 2 with a select filter</th>
<th>Header 3</th>
</tr>
<tr>
<td>Content of row 1, column 1</td>
<td>Content of row 1, column 2</td>
<td>Content of row 1, column 3</td>
</tr>
</table>
$xwiki.ssfx.use("js/xwiki/table/table.css")
<table id="ChooseYourTableID" class="grid sortable filterable doOddEven" cellpadding="0" cellspacing="0" border="0">
<tr class="sortHeader">
<th>Header 1</th>
<th class="selectFilter">Header 2 with a select filter</th>
<th>Header 3</th>
</tr>
<tr>
<td>Content of row 1, column 1</td>
<td>Content of row 1, column 2</td>
<td>Content of row 1, column 3</td>
</tr>
</table>
Result
| Header 1 | Header 2 with a select filter | Header 3 |
|---|---|---|
| Content of row 1, column 1 | Content of row 1, column 2 | Content of row 1, column 3 |
You can also see examples of tables using this feature on the following pages: