// Original code: http://stackoverflow.com/a/14268260/1163000 // Usage: `makeSortable(elem);` (function () { function sortTable(table, col, reverse) { var tb = table.tBodies[0], // Use `<tbody>` to ignore `<thead>` and `<tfoot>` rows tr = Array.prototype.slice.call(tb.rows, 0); // Put rows into array reverse = -((+reverse) || -1); tr = tr.sort(function (a, b) { // Sort rows return reverse * (a.cells[col].textContent.trim().localeCompare(b.cells[col].textContent.trim())); }); for (var i = 0, len = tr.length; i < len; ++i) { tb.appendChild(tr[i]); // Append each row in order } } function makeSortable(table) { var th = table.tHead, i; th && (th = th.rows[0]) && (th = th.cells); if (th) { i = th.length; } else { return; // If no `<thead>` then do nothing } while (--i >= 0)(function (i) { var dir = 1; th[i].onmousedown = function () { for (var j = 0, jen = th.length; j < jen; ++j) { th[j].className = th[j].className.replace(/(^| )desc|asc( |$)/g, "$1$2"); } sortTable(table, i, (dir = 1 - dir)); this.className += dir === 1 ? " desc" : " asc"; return false; }; }(i)); } window.makeSortable = makeSortable; })();
<table class="table-sortable"> <thead> <tr> <th style="width:60%;">Judul Buku</th> <th>Harga</th> <th>Status</th> </tr> </thead> <tbody> <!-- Sortable rows --> <tr> <td>Manusia dan Kebudayaan di Indonesia Koentjaraningrat</td> <td>Rp 75.000</td> <td>Bekas</td> </tr> <tr> <td>Pebble In The Shoe: Diplomatic Struggle For East Timor</td> <td>Rp 100.000</td> <td>Baru</td> </tr> <tr> <td>Membangun Negara Baru Timor Lorosae</td> <td>Rp 100.000</td> <td>Baru</td> </tr> <tr> <td>Edward W. Said — Covering Islam: Bias Liputan Barat</td> <td>Rp 55.000</td> <td>Bekas</td> </tr> <tr> <td>Wacana Masyarakat Dan Kebudayaan Jawa Pesisiran</td> <td>Rp 85.000</td> <td>Bekas</td> </tr> <tr> <td>Paradoks Papua</td> <td>Rp 40.000</td> <td>Bekas</td> </tr> <tr> <td>Political and Economic Systems</td> <td>Rp 60.000</td> <td>Bekas</td> </tr> <tr> <td>Melawan Ketertutupan Informasi</td> <td>Rp 35.000</td> <td>Bekas</td> </tr> <tr> <td>Profil Budaya Politik Indonesia</td> <td>Rp 35.000</td> <td>Bekas</td> </tr> <tr> <td>Agama Pragmatis: Telaah atas Konsepsi Agama John Dewey</td> <td>Rp 45.000</td> <td>Baru</td> </tr> <tr> <td>Jurnalisme Bencana, Bencana Jurnalisme</td> <td>Rp 50.000</td> <td>Baru</td> </tr> <tr> <td>Pemikiran Karl Marx</td> <td>Rp 25.000</td> <td>Bekas</td> </tr> <tr> <td>Bertahan Hidup di Gulag Indonesia, Carmel Budiardjo</td> <td>Rp 200.000</td> <td>Bekas</td> </tr> <tr> <td>Buku Pantja Warsa Manipol Panitia Pembina Jiwa Revolusi</td> <td>Rp 350.000</td> <td>Bekas</td> </tr> <tr> <td>Deliar Noer: Gerakan Moderen Islam 1900–1942</td> <td>Rp 150.000</td> <td>Bekas</td> </tr> <tr> <td>Sang Penguasa oleh Niccolo Machiavelli</td> <td>Rp 35.000</td> <td>Bekas</td> </tr> </tbody> </table> <script> makeSortable(document.getElementsByTagName('table')[0]); </script>
body { margin:0; padding:10px; background-color:aliceblue; } .table-sortable { border-collapse:collapse; table-layout:fixed; width:100%; font:normal normal 13px/1.4 Arial, Sans-Serif; color:black; background-color:white; } .table-sortable th, .table-sortable td { margin:0; padding:5px 8px; border:none; vertical-align:top; text-align:left; } .table-sortable th { font-weight:bold; background-color:slategray; color:white; border-color:white; } .table-sortable tbody tr:nth-child(even) { background-color:whitesmoke } .table-sortable th { cursor:pointer } th.asc, th.desc { background-color:lightslategray } th.asc:before, th.desc:before { content:""; display:block; float:right; width:0; height:0; border:.4em solid transparent; } th.asc:before { border-bottom-color:inherit; border-top-width:0; margin-top:.4em; } th.desc:before { border-top-color:inherit; border-bottom-width:0; margin-top:.5em; }