Difference between revisions of "How to put zebra stripes on sortable wiki tables"
From Organic Design wiki
m (→The code) |
m (→The code) |
||
Line 4: | Line 4: | ||
<source lang="javascript"> | <source lang="javascript"> | ||
// Initialises stripes on all zebra tables after page load | // Initialises stripes on all zebra tables after page load | ||
− | $(document).ready( function() { | + | $(document).ready(function() { |
$('table.zebra tbody tr:nth-child(even)').addClass('even').removeClass('odd'); | $('table.zebra tbody tr:nth-child(even)').addClass('even').removeClass('odd'); | ||
$('table.zebra tbody tr:nth-child(odd)').addClass('odd').removeClass('even'); | $('table.zebra tbody tr:nth-child(odd)').addClass('odd').removeClass('even'); | ||
Line 10: | Line 10: | ||
// Re do stripes after sort finishes | // Re do stripes after sort finishes | ||
− | $(document).on( 'sortEnd.tablesorter', function(event) { | + | $(document).on('sortEnd.tablesorter', function(event) { |
var table = $(event.target); | var table = $(event.target); | ||
if(table.hasClass('zebra')) { | if(table.hasClass('zebra')) { |
Revision as of 17:21, 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 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 | |||||||||||
---|---|---|---|---|---|---|---|---|---|---|---|---|
|
|