「Filter table」の版間の差分
Music765plus (トーク | 投稿記録) (ページの作成:「<noinclude>{{TOCright}} == Description == This widget provides filter buttons above tables, and will allow table content to be filtered by CSS classes applied to rows. =…」) |
Music765plus (トーク | 投稿記録) |
||
| (同じ利用者による、間の2版が非表示) | |||
| 1行目: | 1行目: | ||
| − | <noinclude> | + | <noinclude> |
== Description == | == Description == | ||
This widget provides filter buttons above tables, and will allow table content to be filtered by CSS classes applied to rows. | This widget provides filter buttons above tables, and will allow table content to be filtered by CSS classes applied to rows. | ||
| 296行目: | 296行目: | ||
// Collect widget inputs | // Collect widget inputs | ||
var table_id = '<!--{$tableid|default:'table1'|escape:javascript}-->'; | var table_id = '<!--{$tableid|default:'table1'|escape:javascript}-->'; | ||
| − | var filter_classes = '<!--{$filters|default:' | + | var filter_classes = '<!--{$filters|default:'aaa,bbb,ccc,ddd,eee'|escape:javascript}-->'; |
filter_classes = filter_classes.split(','); | filter_classes = filter_classes.split(','); | ||
var mode = '<!--{$mode|default:'and'|escape:javascript}-->'; | var mode = '<!--{$mode|default:'and'|escape:javascript}-->'; | ||
| 353行目: | 353行目: | ||
fieldset.id = table_id + '-controls'; | fieldset.id = table_id + '-controls'; | ||
fieldset.className = 'widget'; | fieldset.className = 'widget'; | ||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
var ul = document.createElement('ul'); | var ul = document.createElement('ul'); | ||
| 370行目: | 359行目: | ||
var button = document.createElement('button'); | var button = document.createElement('button'); | ||
button.classList.add('filter-table-clear'); | button.classList.add('filter-table-clear'); | ||
| − | button.innerText = ' | + | button.innerText = 'すべて'; |
ul.appendChild(button); | ul.appendChild(button); | ||
2021年8月29日 (日) 15:47時点における最新版
Description
This widget provides filter buttons above tables, and will allow table content to be filtered by CSS classes applied to rows.
Parameters
- tableid
- The "id" attribute of the table to target with the widget
- filters
- A comma separated list of classes to filter for.
- Optional: Use a broken-pipe symbol to display a different button text to the underlying value, e.g.
value1¦displayname1, value2¦displayname2 - Optional: Use wikicode in the button display text, including icons - sorry no commas.
- Optional: A value of <br> will instead insert a newline.
- Optional: A value of label¦displayname will instead insert a label.
- mode
- Optional. Defaults to "AND", which uses AND logic to connect filters.
- Can be set to "OR" to use OR logic to join the filter buttons with OR logic instead.
- Can also be set to "ONLY" logic to only allow one active filter at a time.
Notes
- This widget should be used via Template:Filter table so that its usage can be tracked.
- Incompatible with tables with the "collapsible" or "expandable" classes. Use "mw-collapsible" instead.
Example
- AND
{| id="table1" class="wikitable"
! Heading one
! Heading two
|- class="filter-row WvW"
| Power wvw
| Precision wvw
|- class="filter-row PvE"
| Power pve
| Precision pve
|- class="filter-row PvP"
| Condition damage pvp
| Ferocity pvp
|- class="filter-row PvE WvW"
| Power pve 2 + wvw
| Precision pve 2 + wvw
|- class="filter-row PvP"
| Condition damage pvp 2
| Ferocity pvp 2
|}
{{Filter table|tableid=table1|filters=PvE,WvW,PvP|mode=AND}}
| Heading one | Heading two |
|---|---|
| Power wvw | Precision wvw |
| Power pve | Precision pve |
| Condition damage pvp | Ferocity pvp |
| Power pve 2 + wvw | Precision pve 2 + wvw |
| Condition damage pvp 2 | Ferocity pvp 2 |
- OR
{| id="table2" class="wikitable"
! Heading one
! Heading two
|- class="filter-row WvW"
| Power wvw
| Precision wvw
|- class="filter-row PvE"
| Power pve
| Precision pve
|- class="filter-row PvP"
| Condition damage pvp
| Ferocity pvp
|- class="filter-row PvE WvW"
| Power pve 2 + wvw
| Precision pve 2 + wvw
|- class="filter-row PvP"
| Condition damage pvp 2
| Ferocity pvp 2
|}
{{Filter table|tableid=table2|filters=PvE,WvW,PvP|mode=OR}}
| Heading one | Heading two |
|---|---|
| Power wvw | Precision wvw |
| Power pve | Precision pve |
| Condition damage pvp | Ferocity pvp |
| Power pve 2 + wvw | Precision pve 2 + wvw |
| Condition damage pvp 2 | Ferocity pvp 2 |
- ONLY
{| id="table3" class="wikitable"
! Heading one
! Heading two
|- class="filter-row WvW"
| Power wvw
| Precision wvw
|- class="filter-row PvE"
| Power pve
| Precision pve
|- class="filter-row PvP"
| Condition damage pvp
| Ferocity pvp
|- class="filter-row PvE WvW"
| Power pve 2 + wvw
| Precision pve 2 + wvw
|- class="filter-row PvP"
| Condition damage pvp 2
| Ferocity pvp 2
|}
{{Filter table|tableid=table3|filters=PvE,WvW,PvP|mode=ONLY}}
| Heading one | Heading two |
|---|---|
| Power wvw | Precision wvw |
| Power pve | Precision pve |
| Condition damage pvp | Ferocity pvp |
| Power pve 2 + wvw | Precision pve 2 + wvw |
| Condition damage pvp 2 | Ferocity pvp 2 |