Version: 1.2 (29-JUL-2013)
a jQuery Plugin that converts TeamRaiser tables into a responsive 'div' format
Include the javascript file after jQuery:
<script type="text/javascript" src="jquery-responsive-TeamRaiser-tables.js"></script>
Also include the provided stylesheet file:
<link rel="stylesheet" href="jquery-responsive-TeamRaiser-tables.css">
Select your TeamRaiser table and voilà!
$('.tr_roster').responsiveTeamRaiserTable();
Note: when using this plugin to convert S42-tables, wrap the S-tag in another element (preferably a div) and use that selector.
<div id="S42">[[S42:0:top-participants:10]]</div>
$('#S42').responsiveTeamRaiserTable({
tableType: 'S42'
});
Create a reusable pagebuilder page with a single HTML component containing the plugin's Javascript/CSS (wrapping each in their respective tags). Also include a jQuery CDN if needed. Name the page something that is easy to remember, such as plugin_jquery_responsive_TeamRaiser_tables.
On the page using the plugin, pull in the content of your reusable using the S51 tag:
[[S51:plugin_jquery_responsive_TeamRaiser_tables:false]]
Select your TeamRaiser table and ker-pow!
$('.tr_roster').responsiveTeamRaiserTable();
This plugin also currently supports an (optional) configuration argument:
$('.tr_roster').responsiveTeamRaiserTable( {
labels: ['Badges', 'Team Member', 'Raised', ' '],
order: ['milestones', 'name', 'amount', 'donate'],
tableType: 'S42',
sort: 'amount'
});
labels
- labels for each of the four table column headings
order
- ordering of columns (keywords: 'name', 'milestones', 'amount', and 'donate')
tableType
- specify which type of table is being selected ('team' or 'S42' / default: 'team')
sort
- sorts the table in descending order by a participant's amount raised ('amount', 'name', or 'none' / default: 'amount')