JavaScript Table Sorter

http://www.dte.web.id

by Taufik Nurrohman

HTML

<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 &mdash; 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>
         ...

CSS

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

JavaScript

// 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;
})();