Table Sorter

Version 21.2 by Ludovic Dubost on 2015/04/01 14:21

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 Enterprise 1.0 onwards

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" %)
(% 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 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

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

You can also see examples of tables using this feature on the following pages:

Tags: presentation
     

Get Connected