Source: W3Tech
<table id="bar-table">
...stuff...
<tbody>
<tr class="bar">
<td class="name">McGinty's Public House</td>
<td class="price">$4.00</td>
<td class="address">911 Ellsworth Drive</td>
</tr>
...more rows with class "bar"...
sortByPrice = function(a,b) {
return $(a).children('.price').html() >
$(b).children('.price').html() ? 1 : -1; }
var bars = $(‘.bar’)
//bars is now an array of <tr> elements
bars.sort(sortByPrice);
//bars is now a sorted array of <tr> elements
$.each(bars, function(index, bar) {
$('#bar-table').children('tbody').append(bar);
}); // Very Bad!!!
Source: Stack Overflow
$(document).ready(function() { $('table.sortable').each(function() { var $table = $(this); $('th', $table).each(function(column) { var $header = $(this); $header.click(function() { var rows = $table.find('tbody > tr').get(); rows.sort(function(a, b) { var keyA = $(a).children('td').eq(column).text().toUpperCase();
var keyB = $(b).children('td').eq(column).text().toUpperCase(); if(keyA < keyB) return -1; if(keyA > keyB) return 1; return 0; }); $.each(rows, function(index, row) { $table.children('tbody').append(row); }); }); }); }); })
<tr class="bar">
<td class="name">
TGI Friday's
</td> <td class="price">
$4.00
</td> <td class="address">
911 Ellsworth Drive
</td> </tr>
...more rows...
bars = $('.bar'); bars.sort(sortByPrice); $.each(bars,
function(index, bar) { $('tbody').append(bar);
});
Not at all obvious how these are connected
<table> ...stuff... <tbody data-bind="foreach: bars">
<tr class="bar"> <td data-bind="text: name" /> <td data-bind="text: price" /> <td data-bind="text: address" /> </tr>
function sortByPrice (a,b) {
return a.price > b.price ? 1 : -1;
}
barData = [{name: "Piratz Tavern", price: "3.50", ... }];
sortedBarData = barData.sort(sortByPrice);
viewModel.sortedBars = ko.observableArray(sortedBarData);
$.each(rows, function(index, row) {
$table.children('tbody').append(row);
});