<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/js/bootstrap.min.js"></script>
<script src="//code.jquery.com/jquery-1.11.1.min.js"></script>
<!------ Include the above in your HEAD tag ---------->
<!DOCTYPE html>
<html>
<head>
<title>Light Javascript Table Sorter</title>
<link href="http://netdna.bootstrapcdn.com/twitter-bootstrap/2.2.2/css/bootstrap.no-icons.min.css" rel="stylesheet">
</head>
<body>
<section class="container">
<h2>Light Javascript Table Sorter</h2>
<table>
<thead>
<tr>
<th>Name</th>
<th>Email</th>
<th>Phone</th>
<th>Price</th>
</tr>
</thead>
<tbody>
<tr>
<td>John Doe</td>
<td>john.doe@gmail.com</td>
<td>0123456789</td>
<td>99</td>
</tr>
<tr>
<td>Jane Vanda</td>
<td>jane@vanda.org</td>
<td>9876543210</td>
<td>349</td>
</tr>
<tr>
<td>Alferd Penyworth</td>
<td>alfred@batman.com</td>
<td>6754328901</td>
<td>199</td>
</tr>
</tbody>
</table>
</section>
</body>
</html>
h2 {
margin-bottom: 50px;
}
.container {
text-align: center;
overflow: hidden;
width: 800px;
margin: 0 auto;
}
.container table {
width: 100%;
}
.container td, .container th {
padding: 10px;
}
.container td:first-child, .container th:first-child {
padding-left: 20px;
}
.container td:last-child, .container th:last-child {
padding-right: 20px;
}
.container th {
border-bottom: 1px solid #ddd;
position: relative;
cursor: pointer;
}
.container th.desc:after {
border-top-color: #666;
}
.container th.asc:before {
border-bottom-color: #666;
}
.container th:after, .container th:before {
content: '';
display: block;
position: absolute;
right: 0;
border-color: transparent;
border-style: solid;
border-width: 5px;
width: 0;
height: 0;
}
.container th:after {
border-top-color: #ddd;
top: 22px;
}
.container th:before {
border-bottom-color: #ddd;
top: 10px;
}
.github {
margin-top: 50px;
}
(function(document) {
'use strict';
var LightTableSorter = (function(Arr) {
var _th, _cellIndex, _order = '';
function _text(row) {
return row.cells.item(_cellIndex).textContent.toLowerCase();
}
function _sort(a, b) {
var va = _text(a), vb = _text(b), n = parseInt(va, 10);
if (n) {
va = n;
vb = parseInt(vb, 10);
}
return va > vb ? 1 : va < vb ? -1 : 0;
}
function _toggle() {
var c = _order !== 'asc' ? 'asc' : 'desc';
_th.className = (_th.className.replace(_order, '') + ' ' + c).trim();
_order = c;
}
function _reset() {
_th.className = _th.className.replace('asc', '').replace('desc', '');
_order = '';
}
function onClickEvent(e) {
if (_th && _cellIndex !== e.target.cellIndex) {
_reset();
}
_th = e.target;
_cellIndex = _th.cellIndex;
var tbody = _th.offsetParent.getElementsByTagName('tbody')[0],
rows = tbody.rows;
if (rows) {
rows = Arr.sort.call(Arr.slice.call(rows, 0), _sort);
if (_order === 'asc') {
Arr.reverse.call(rows);
}
_toggle();
tbody.innerHtml = '';
Arr.forEach.call(rows, function(row) { tbody.appendChild(row); });
}
}
return {
init: function() {
var ths = document.getElementsByTagName('th');
Arr.forEach.call(ths, function(th) { th.onclick = onClickEvent; });
}
};
})(Array.prototype);
document.addEventListener('readystatechange', function() {
if (document.readyState === 'complete') {
LightTableSorter.init();
}
});
})(document);
