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 = $(;
	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

See also