Skip to content

Instantly share code, notes, and snippets.

@roberocity
Last active August 29, 2015 14:07
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save roberocity/9b98127ea1886551520f to your computer and use it in GitHub Desktop.
Save roberocity/9b98127ea1886551520f to your computer and use it in GitHub Desktop.
sorts a table by rows with no dependencies
th[data-sort] {
cursor: n-resize;
-webkit-touch-callout: none;
-webkit-user-select: none;
-khtml-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
}
th:after {
color: #999;
font-weight: normal;
font-size: 0.8em;
margin-left: 0.15em;
content: '\25b2';
visibility: hidden;
}
th[data-sort-dir="1"]:after {
content: '\25b2';
visibility: visible;
}
th[data-sort-dir="-1"]:after {
content: '\25bc';
visibility: visible;
}
(function() {
'use strict';
var basicSort = function ( a, b ) {
if ( !isNaN( a ) && !isNaN( b ) ) {
a = +a;
b = +b;
}
if ( typeof a == 'string' && typeof b == 'string' ) {
a = a.toLowerCase();
b = b.toLowerCase();
}
if ( a > b ) return 1;
if ( a < b ) return -1;
return 0;
};
Array.prototype.slice.call(document.querySelectorAll('th[data-sort]'), 0)
.forEach(function(el, index) {
if (! el.tbl) {
var tbl = el.parentNode;
while (tbl.tagName != 'TABLE') {
tbl = tbl.parentNode;
}
tbl.setAttribute('data-sort-dir', 1);
el.tbl = tbl;
}
Array.prototype.slice.call(el.tbl.querySelectorAll('th'), 0)
.forEach(function(h, colIndex) {
if (h == el) el.setAttribute('data-index', colIndex);
});
el.addEventListener('click', function(e) {
var asc = +el.tbl.getAttribute('data-sort-dir'),
rows = Array.prototype.slice.call(el.tbl.querySelectorAll('tbody tr'), 0),
bdy = el.tbl.querySelector('tbody');
Array.prototype.slice.call(el.tbl.querySelectorAll('th[data-sort-dir]'), 0)
.forEach(function(h) {
h.removeAttribute('data-sort-dir');
});
el.tbl.setAttribute('data-sort-index', el.getAttribute('data-index'));
el.tbl.setAttribute('data-sort-dir', asc * -1);
el.setAttribute('data-sort-dir', asc);
rows.sort(function(a, b) {
var idx = el.tbl.getAttribute( 'data-sort-index' ),
fn = function ( _ ) {
if ( !_ ) return '';
return _.getAttribute('data-sort-by') || _.textContent;
},
a2 = fn(a.querySelectorAll('td')[idx]),
b2 = fn(b.querySelectorAll('td')[idx]);
return basicSort(a2, b2) * asc;
});
while (bdy.firstChild) {
bdy.removeChild(bdy.firstChild);
}
rows.forEach(function(r, i) { bdy.appendChild(r); });
});
});
})();
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment