"JavaScript Table Sorter"
Bootstrap 3.3.0 Snippet by kbhokray

<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);

Related: See More


Questions / Comments: