Table Sorter
Last modified by Ecaterina Moraru (Valica) on 2025/02/12 12:25
 | Turns basic tables in advanced tables featuring filters and sorting |
| Type | Snippet |
| Category | |
| Developed by | |
| Rating | |
| 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 :-)
Note:
- In order for the Table Sorter to work, you need to manually include the skin extensions: the JavaScript and CSS file located on the filesystem, associated with the Table component. The file JavaScript Extension (jsfx) needs the "parse" parameter to be set to "true".
Code (xwiki/2.0, xwiki/2.1 syntax using wiki syntax for the table)
{{velocity}}
$xwiki.jsfx.use("js/xwiki/table/tablefilterNsort.js", true)
$xwiki.ssfx.use("js/xwiki/table/table.css")
{{/velocity}}
(% class="grid sortable filterable doOddEven" id="clientList" %)
(% class="sortHeader"%)|=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", true)
$xwiki.ssfx.use("js/xwiki/table/table.css")
{{/velocity}}
(% class="grid sortable filterable doOddEven" id="clientList" %)
(% class="sortHeader"%)|=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, xwiki/2.1 syntax using html for the table)
{{velocity}}
$xwiki.jsfx.use("js/xwiki/table/tablefilterNsort.js", true)
$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", true)
$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", true)
$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 |
