Table class 'doOddEven' not working solo

Help / Discuss
1

Hi.

We often use sortable and/or filterable tables with grid and different odd/even styled rows as described at https://www.xwiki.org/xwiki/bin/view/Documentation/UserGuide/Features/XWikiSyntax/?syntax=2.1&section=Tables

{{velocity}}
$xwiki.ssfx.use("js/xwiki/table/table.css")
$xwiki.jsfx.use("js/xwiki/table/tablefilterNsort.js", true)
{{/velocity}}

(% class="grid sortable filterable doOddEven" id="tableid" %)
(% class="sortHeader" %)|=Title 1|=Title 2
|Cell 11|Cell 12
|Cell 21|Cell 22

It works even if you omit some of the classes. But what is not working is writing a table with only the “doOddEven” class or mixed with “grid”.

(% class="doOddEven" id="tableid1" style="width:auto "%)
|=Heading 1|=Heading 2
|Cell Row 1 Column 1|Cell Row 1 Column 2
|Cell Row 2 Column 1|Cell Row 2 Column 2

Any idea how to fix this?
Regards, Simpel

2

doOddEven usage is implemented in tablefilterNsort.js , so in order for it to do anything, you need to include the $xwiki.jsfx.use("js/xwiki/table/tablefilterNsort.js", true) line.

Also, from what I see in that file, it’s only applied when the table is made sortable, so I guess the table needs to also have the class ‘sortable’.

However, if all you need is to make a table that alternates colors between lines, you can use the bootstrap class for it, not the table.css and table.js (which are old implementations for sortable and filterable table for XWiki, from before XWiki had bootstrap and from when Internet Explorer was still a browser that the world was paying attention to :slight_smile: ).
The bootstrap classes are described here CSS · Bootstrap , the one you want is table-striped.

Hope this helps,
Anca

3

Thank you.

That works like charm. Reading your link I found another very interesting class table-hover. This one I documented in our wiki and made it a bit more accessible:

.table-hover>tbody>tr:hover {
    outline: 1.5px solid #555;
}

Simpel