Sitemap table sorter

by astin query

HTML

<div id="toc-container">Memuat...</div>

CSS

body {
    margin:0;
    padding:10px;
    background-color: #DDD;
}

.table-sortable {
    border: 2px solid #FFF;
    font: 11px Verdana,Tahoma,Arial,Sans-Serif;
    color: #333;
    border-collapse:collapse;
    margin:0 auto;
    table-layout:fixed;
    background-color:white;
}
.table-sortable th, .table-sortable td {
    margin:0;
    padding:5px 8px;
    border: 1px solid #FFF;
    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
}
.table-sortable tr td.post_title {
    width:60%;
    background-color: #2372A7;
}
.table-sortable tr td.post_pub {
    width:20%;
    color: #FFF;
    background-color: #2372A7;
}
.table-sortable tr td.post_com {
    width:20%;
    background-color: #D7DEF0;    
}
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;
}
.table-sortable a {
    color: #FFF;
    text-decoration:none;
}
.table-sortable a:hover {
    text-decoration:none;
}
.table-sortable tr td.post_title:hover {
  background-color:#174B6F;
  -webkit-box-shadow:inset 0 0 3px rgba(0,0,0,.4);
  -moz-box-shadow:inset 0 0 3px rgba(0,0,0,.4);
  box-shadow:inset 0 0 3px rgba(0,0,0,.4);
}

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

// Fungsi untuk membuat Tabel Konten dengan JSON Blogger

function generateTOC(json) {
    var a = json.feed.entry,
        b, c, d, e, f = '<table class="table-sortable"><thead><tr><th class="post_title">Judul Posting</th><th class="post_pub">Tanggal Terbit</th><th class="post_com">Jumlah Komentar</th></tr></thead><tbody>',
        month = ['Januari', 'Februari', 'Maret', 'April', 'Mei', 'Juni', 'Juli', 'Agustus', 'September', 'Oktober', 'November', 'Desember'],
        z = '',
        g =...