How to put zebra stripes on sortable wiki tables

From Organic Design wiki
Revision as of 17:23, 3 October 2015 by Nad (talk | contribs) (The code)
(diff) ← Older revision | Latest revision (diff) | Newer revision → (diff)

For some reason, the version of jquery.tablesorter that ships with MediaWiki doesn't include the zebra widget, so here's a JavaScript snippet that you can put into your MediaWiki:Common.js article that will add zebra stripes to all tables that have "zebra" in their class attribute. If the table is sortable, this snippet rebuilds the stripes on a table after the sort is run.

The code

// Initialises stripes on all zebra tables after page load
$(document).ready(function() {
	$('table.zebra tbody tr:nth-child(even)').addClass('even');
	$('table.zebra tbody tr:nth-child(odd)').addClass('odd');
});

// Re do stripes on a table after sort finishes
$(document).on('sortEnd.tablesorter', function(event) {
	var table = $(event.target);
	if(table.hasClass('zebra')) {
		$('tbody tr:nth-child(even)',table).addClass('even').removeClass('odd');
		$('tbody tr:nth-child(odd)',table).addClass('odd').removeClass('even');
	}
});


The stripes are in the form of "odd" and "even" class attributes added to the table's TR elements, so for the stripes to be visible you'll need to add a CSS rule to your MediaWiki:Common.css article as well.

table.zebra tr.odd {
	background-color: #eee;
}

An example

Here's an example sortable table that has the zebra class added.

Wiki markup   What it looks like in your browser
{|class="wikitable sortable zebra"
!Foo!!Bar
|-
|4||apple
|-
|3||orange
|-
|2||peach
|-
|1||banana
|}
           
Foo Bar
4 apple
3 orange
2 peach
1 banana

See also