sortables.js

// A small sorting framework
//
// add this script to the page and then use this layout:
//
// <table data-has-sortables>
// <thead>
//   <tr>
//     <th data-is-sortable-by="field1">Field 1</th>
//     <th data-is-sortable-by="field2">Field 2</th>
//   </tr>
// </thead>
// <tbody>
//   <tr data-sort-by-field1="fied1value" data-sort-by-field2="fied2value" >...</tr>
//   <tr data-sort-by-field1="fied1value" data-sort-by-field2="fied2value" >...</tr>
//   ...
// </tbody>
// </table>

function initSortables(container)
{
	container.querySelectorAll('[data-is-sortable-by]')
		.forEach(link => link.addEventListener('click', () => toggleSorting(container, link)));
}

function toggleSorting(container, link)
{
	container.querySelectorAll('.sort-arrow').forEach(element => element.remove());

	var sortBy = link.dataset.isSortableBy;
	var searchWithin = container.querySelector('[data-sort-by-'+sortBy+']').parentElement;
	
	var desc = false;
	if (container.dataset.sortField == sortBy) { // cannot use ampersand in flexy =)
		if (container.dataset.sortDirection == 'asc') {
			desc = true;
		}
	}
	
	container.dataset.sortField = sortBy;
	container.dataset.sortDirection = desc ? 'desc' : 'asc';

	var datasetVar = 'sortBy' + sortBy.charAt(0).toUpperCase() + sortBy.slice(1);
	var sorted = searchWithin.childElements()
		.sort((el1, el2) => {
			var v1 = el1.dataset[datasetVar];
			var v2 = el2.dataset[datasetVar];

			 // sort as numbers
			if (! (isNaN(v1) || isNaN(v2))) {
				return parseInt(v1) - parseInt(v2);
			}

			// sort as sting
			v1 = ''+v1; v2 = ''+v2;
			return v1 > v2 ? 1 : (v1==v2 ? 0 : -1);
		});

	if (desc) {
		sorted.reverse();
		link.innerHTML += '<img class="sort-arrow" src="images/arrow_down.gif" border="0" align="absmiddle">';
	} else {
		link.innerHTML += '<img class="sort-arrow" src="images/arrow_up.gif" border="0" align="absmiddle">';
	}

	sorted.forEach(element => { element.parentElement.appendChild(element); })
}

document.querySelectorAll('[data-has-sortables]').forEach(elem => initSortables(elem));