Difference between revisions of "How to put zebra stripes on sortable wiki tables"
From Organic Design wiki
m (→The code) |
m (→The code) |
||
Line 9: | Line 9: | ||
}); | }); | ||
− | // Re do stripes after sort finishes | + | // Re do stripes on a table after sort finishes |
$(document).on('sortEnd.tablesorter', function(event) { | $(document).on('sortEnd.tablesorter', function(event) { | ||
var table = $(event.target); | var table = $(event.target); |
Revision as of 17:22, 3 October 2015
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').removeClass('odd');
$('table.zebra tbody tr:nth-child(odd)').addClass('odd').removeClass('even');
});
// 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 | |||||||||||
---|---|---|---|---|---|---|---|---|---|---|---|---|
|
|