This JSPWikiStyle allows you to add alternate row coloring to your (large) tables. You can do this by simply enclosing the table inside %%zebra-table ... %% tags.

Example:#

column-head1 column-head2
cell-data cell data
cell-data cell data
cell-data cell data
cell-data cell data
cell-data cell data

Basic syntax: #

%%zebra-table ... %%
%%zebra-<colorOdd> ... %%
%%zebra-<colorOdd>-<colorEven> ... %%

You can specify the odd and/or even colors using html hex color values or HTMLColorNames like aqua, black, blue, fuchsia, gray, green, lime, maroon, navy, olive, purple, red, silver, teal, white, yellow and transparent. When nothing specified, the odd rows get the css class '.odd'. (see your jspwiki.css to the actual formatting of this class)

Here is an example of a table with zebra style:

%%zebra-table 
|| column-head1 || column-head2 
| cell-data | cell data 
| cell-data | cell data 
| cell-data | cell data 
/% 

Examples#

You can see the result here
  • normal table
column-head1 column-head2
cell-data cell data
cell-data cell data
cell-data cell data

  • zebra table with odd rows styled according to jspwiki.css : %%zebra-table
column-head1 column-head2
cell-data cell data
cell-data cell data
cell-data cell data
cell-data cell data
cell-data cell data

  • zebra table with odd rows colored #ffe0e0 : %%zebra-ffe0e0
column-head1 column-head2
cell-data cell data
cell-data cell data
cell-data cell data
cell-data cell data
cell-data cell data

  • zebra table with odd and even rows colored %%zebra-ffe0e0-ffff80
column-head1 column-head2
cell-data cell data
cell-data cell data
cell-data cell data
cell-data cell data
cell-data cell data

Introduction#

Add a %%table-filter JSPWikiStyle around your table to get EXCEL-like column filters. Each column gets a dropdown with a sorted list of filterable values. Multiple filter selections are supported too.

See also Sortable Tables

Basic syntax: #

Enclose your table in %%table-filter tags.
Your table is assumed to start with a header row. When all is fine, you should see an additional table row with filter dropdowns for each column.
%%table-filter
|| Title || Author || Published   || Edition || Some IP@
| book1  |  zappy  |  25 Feb 2005 |  5       |  100.100.100.100
| book2  |  dappy  |  25 Jan 2005 |  19      |  256.100.100.100
| book3  |  pappy  |  23 Mar 2005 |  06      |  10.100.100.100
| book4  |  dappy  |  21 Apr 2005 |  199     |  1.100.100.100
| book5  |  rappy  |  25 Jul 2005 |  06      |  1.100.25.100
/%

Examples#

You can see the result here
Title Author Published Edition Some IP@
book1 zappy 25 Feb 2005 5 100.100.100.100
book2 dappy 25 Jan 2005 19 256.100.100.100
book3 pappy 23 Mar 2005 06 10.100.100.100
book4 dappy 21 Apr 2005 199 1.100.100.100
book5 rappy 25 Jul 2005 06 1.100.25.100

Introduction#

This JSPWikiStyle allows you to make tables sortable by enclosing them inside a %%sortable block. Just click the column header and your table is sorted without round-trip to the server.

Sortable tables are now part of the standard JSPWiki distribution, V.2.3.x.

Basic syntax: #

Enclose your table in %%table-filter tags.
Your table is assumed to start with a header row. When all is fine, you should see an additional table row with filter dropdowns for each column.
%%table-filter
|| Title || Author || Published   || Edition || Some IP@
| book1  |  zappy  |  25 Feb 2005 |  5       |  100.100.100.100
| book2  |  dappy  |  25 Jan 2005 |  19      |  256.100.100.100
| book3  |  pappy  |  23 Mar 2005 |  06      |  10.100.100.100
| book4  |  dappy  |  21 Apr 2005 |  199     |  1.100.100.100
| book5  |  rappy  |  25 Jul 2005 |  06      |  1.100.25.100
/%

Examples#

Title Author Published Edition Some IP@ Expenses
book1 zappy 25 Feb 2005 5 100.100.100.100 €500
book2 happy 25 Jan 2005 19 256.100.100.100 €1500
book3 pappy 23 Mar 2005 06 10.100.100.100 €50
book4 dappy 21 Apr 2005 199 1.100.100.100 €0.500
book5 rappy 25 Jul 2005 017 1.100.25.100 €5500

Combined with Zebra:

Title Author Published Edition Some IP@ Expenses
book1 zappy 25 Feb 2005 5 100.100.100.100 €500
book2 happy 25 Jan 2005 19 256.100.100.100 €1500
book3 pappy 23 Mar 2005 06 10.100.100.100 €50
book4 dappy 21 Apr 2005 199 1.100.100.100 €0.500
book5 rappy 25 Jul 2005 017 1.100.25.100 €5500

Combined with Zebra (Colored)

Title Author Published Edition Some IP@ Expenses
book1 zappy 25 Feb 2005 5 100.100.100.100 €500
book2 happy 25 Jan 2005 19 256.100.100.100 €1500
book3 pappy 23 Mar 2005 06 10.100.100.100 €50
book4 dappy 21 Apr 2005 199 1.100.100.100 €0.500
book5 rappy 25 Jul 2005 017 1.100.25.100 €5500

You can also combine the table styles. The table below uses the zebra, sortable and table-filter styles:
RJ-45 PINDB-9 PinRS-232Comment
1N/CN/A
2N/CN/A
33TDTransmit Data
42RDReceive Data
51 & 4??
65??
7N/CN/ALooped to RJ-45 8
8N/CN/ALooped to RJ-45 7
9N/CN/C

Code used to create above:

%%zebra-table
%%sortable
%%table-filter
||RJ-45 PIN||DB-9 Pin||RS-232||Comment
|1|N/C|N/A|
|2|N/C|N/A|
|3|3|TD|Transmit Data
|4|2|RD|Receive Data
|5|1 & 4|??|
|6|5|?? |
|7|N/C|N/A|Looped to RJ-45 8
|8|N/C|N/A|Looped to RJ-45 7
|9|N/C|N/C|
/%
/%
/%

NOTE: This requires a special plug-in and does not work.

Following syntax is also supported: use '|<' or '||<' to collapse a cell with the previous cell so it spans multiple columns. use '|^' or '||^' to collapse a cell with the cell above so that it spans multiple rows. use '|( <css-style> ) ' to add specific formatting to a cell. use '#' inside a table cell to display the current row number. (auto row numbering)

Examples#

Nr A < C <
# a b c (background:yellow;)d
# ^ b ^ (background:yellow;)d

Code Used to Create

 |Nr |A |< |C |<
 |#  |a |b |c |(background:yellow;)d
 |#  |^ |b |^ |(background:yellow;)d

NOTE: This requires a special plug-in and does not work.

The standard table markup of JSPWiki requires you to put every row on a single line without carriage returns.

With the Table plugin, a single table row and even a single table cell can be entered on multiple lines.

A multi-line table row is similar to a bulleted list, where you replace the bullets ('*') with pipes ('|' or '||'). A blank line indicates the end of a table row.

| These cells
| will all appear
| as a single table row

You can combine muti-line rows with standard wiki table syntax too. As long as a single line contains only one table cell, it is assumed to continue on the next line. Multi-line rows always need to be terminated with blank lines; for standard wiki table rows you may omit the blank lines.

| This row has 
| Two cells

| You can also    | use standard wiki markup.
| Here is another | table row

Of course, you can combine this multi line syntax with the '|<', '|^' and '#' stuff as well.

Examples#

Heading 1
Heading 2

Gobble starts a new row!
  • and some more text with wiki markup, all in the same table cell
(background:yellow;) Bar

<
   || Heading 1 
   || Heading 2

   | ''Gobble'' starts a new row! 
   * and some more text with wiki markup, all in the same table cell
   |(background:yellow;) Bar

   | [{Image src='some-nice-picture'}]  
   |<

More Information#

There might be more information for this subject on one of the following:

Add new attachment

Only authorized users are allowed to upload new attachments.
« This page (revision-21) was last changed on 08-Dec-2011 19:29 by jim