Reorder Teams based on Donations Raised
by peteng
HTML
<script src="http://tablesorter.com/__jquery.tablesorter.min.js"></script>
<table>
<tbody>
<tr>
<td colspan="4"><b>Click on the Team for Participant information: </b>
</td>
</tr>
<tr>
<td> </td>
<td><b>Team Name</b>
</td>
<td><b>Team Captain</b>
</td>
<td><b>Donation Total</b>
</td>
</tr>
<tr>
<td></td>
<td><a href="#">another team</a>
</td>
<td>billy bob</td>
<td>CAN$0.00</td>
</tr>
<tr>
<td></td>
<td><a href="#">this team</a>
</td>
<td>jo schmo</td>
<td>CAN$3.00</td>
</tr>
<tr>
<td></td>
<td><a href="#">test team</a>
</td>
<td>john doe</td>
<td>CAN$2.00</td>
</tr>
<tr>
<td></td>
<td>team 4</td>
<td>captain4</td>
<td>CAN$20.00</td>
</tr>
</tbody>
</table>
JavaScript
var table = $('table'),
rows = table.find('tr'),
extractData = function(node) {
return $(node).text().replace(/[^0-9.]/g, '');
};
// remove title from table and add it to header tag
var row0 = rows.eq(0),
title = $('<h1></h1>').text(row0.text()); //change this h1 for whatever tag you want to put it in but it's best not to be part of the table
row0.remove();
title.insertBefore(table);
// add table header
var headerRow = rows.eq(1),
headerColumns = headerRow.children('td');
// change tds into ths so plugin works
headerRow.empty();
headerColumns.each(function () {
headerRow.append('<th>' + $(this).text() + '</th>');
});
var header = $('<thead></thead>').append(headerRow);
table.prepend(header).tablesorter({
textExtraction: extractData,
headers: {
0: { sorter: false },
1: { sorter: false },
2: { sorter: false },
3: { sorter: 'custom_sort_function' }
}
});
headerRow.children('th').eq(3).click();