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.
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 ... %%
%%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
/%
You can see the result here
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 |
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
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
/%
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 |
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.
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
/%
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 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 | |
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)
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.
- and some more text with wiki markup, all in the same table cell
|| 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'}]
|<
There might be more information for this subject on one of the following: