Table Sorter

Last modified by Ecaterina Moraru (Valica) on 2021/03/18 11:28

cogTurns basic tables in advanced tables featuring filters and sorting
TypeSnippet
Category
Developed by

Vincent Massol

Rating
0 Votes
LicenseGNU Lesser General Public License 2.1

Description

Make sure to check the Datatables Macro extension which is a nicer solution when you're using static data. If you need a scalable solution though you should use the Livetable Macro which allows to dynamically display and order numerous properties from XWiki Objects and more.

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 :-)

This snippet works only from XWiki 1.0 onwards. An usage example can be found in your local XWiki.XWikiSyntax page, section Tables.

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

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}}

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>

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
Tags: presentation
     

Get Connected