Reload Page ❖ Sitemap table sorterweb created
Css
Jquery
Html
Result
Show Result

Edit in JSFiddle

xxxxxxxxxx
 
​

https:////example.com/style.css X

 
1
.table-sortable {
2
    border-collapse:collapse;
3
    table-layout:fixed;
4
    width:100%;
5
    font:normal normal 13px/1.4 Arial, Sans-Serif;
6
    color:black;
7
    background-color:white;
8
}
9
.table-sortable th, .table-sortable td {
10
    margin:0;
11
    padding:5px 8px;
12
    border:none;
13
    vertical-align:top;
14
    text-align:left;
15
}
16
.table-sortable th {
17
    font-weight:bold;
18
    background-color:slategray;
19
    color:white;
20
    border-color:white;
21
}
22
.table-sortable tbody tr:nth-child(even) {
23
    background-color:whitesmoke
24
}
25
.table-sortable th {
26
    cursor:pointer
27
}
28
th.asc, th.desc {
29
    background-color:lightslategray
30
}
31
th.asc:before, th.desc:before {
32
    content:"";
33
    display:block;
34
    float:right;
35
    width:0;
36
    height:0;
37
    border:.4em solid transparent;
38
}
39
th.asc:before {
40
    border-bottom-color:inherit;
41
    border-top-width:0;
42
    margin-top:.4em;
43
}
44
th.desc:before {
45
    border-top-color:inherit;
46
    border-bottom-width:0;
47
    margin-top:.5em;
48
}
49
.table-sortable a {
50
    color:teal;
51
    text-decoration:none;
52
    font-weight:bold;
53
}
54
.table-sortable a:hover {
55
    text-decoration:underline
56
}
xxxxxxxxxx
 
​

https:////example.com/script.js X

​x
 
1
// Original code: https:////stackoverflow.com/a/14268260/1163000
2
// Usage: `makeSortable(elem);`
3
(function () {
4
    function sortTable(table, col, reverse) {
5
        var tb = table.tBodies[0], // Use `<tbody>` to ignore `<thead>` and `<tfoot>` rows
6
            tr = Array.prototype.slice.call(tb.rows, 0); // Put rows into array
7
        reverse = -((+reverse) || -1);
8
        tr = tr.sort(function (a, b) { // Sort rows
9
            return reverse * (a.cells[col].textContent.trim().localeCompare(b.cells[col].textContent.trim()));
10
        });
11
        for (var i = 0, len = tr.length; i < len; ++i) {
12
            tb.appendChild(tr[i]); // Append each row in order
13
        }
14
    }
15
​
16
    function makeSortable(table) {
17
        var th = table.tHead,
18
            i;
19
        th && (th = th.rows[0]) && (th = th.cells);
20
        if (th) {
21
            i = th.length;
22
        } else {
23
            return; // If no `<thead>` then do nothing
24
        }
25
        while (--i >= 0)(function (i) {
26
                var dir = 1;
27
                th[i].onmousedown = function () {
28
                    for (var j = 0, jen = th.length; j < jen; ++j) {
29
                        th[j].className = th[j].className.replace(/(^| )desc|asc( |$)/g, "$1$2");
30
                    }
31
                    sortTable(table, i, (dir = 1 - dir));
32
                    this.className += dir === 1 ? " desc" : " asc";
33
                    return false;
34
                };
35
            }(i));
36
    }
37
    window.makeSortable = makeSortable;
38
})();
39
​
40
// Fungsi untuk membuat Tabel Konten dengan JSON Blogger
41
​
42
function generateTOC(json) {
43
    var a = json.feed.entry,
44
        b, c, d, e, f = '<table class="table-sortable"><thead><tr><th>Judul Posting</th><th>Tanggal Terbit</th><th>Jumlah Komentar</th></tr></thead><tbody>',
45
        month = ['Januari', 'Februari', 'Maret', 'April', 'Mei', 'Juni', 'Juli', 'Agustus', 'September', 'Oktober', 'November', 'Desember'],
46
        z = '',
47
        g = document.getElementById('toc-container');
48
    for (var i = 0, len = a.length; i < len; ++i) {
49
        for (var j = 0, jen = a[i].link.length; j < jen; ++j) {
50
            if (a[i].link[j].rel == "alternate") {
51
                b = a[i].link[j].href;
52
                break;
53
            }
54
        }
55
        for (var k = 0, ken = a[i].link.length; k < ken; ++k) {
56
            if (a[i].link[k].rel == "replies" && a[i].link[k].type == "text/html") {
57
                c = a[i].link[k].title;
58
                break;
59
            }
60
        }
61
        d = a[i].title.$t;
62
        e = a[i].published.$t;
63
        z = '<time datetime="' + e + '" title="' + e + '">' + e.substring(8, 10) + ' ' + month[parseInt(e.substring(5, 7), 10) - 1] + ' ' + e.substring(0, 4) + '</time>'
64
        f += '<tr><td><a href="' + b + '" title="' + d + '">' + d + '</a></td><td>' + z + '</td><td>' + c + '</td></tr>';
65
    }
66
    f += '</tbody></table>';
67
    g.innerHTML = f;
68
    // Picu fungsi `makeSortable` setelah markup HTML terinjeksi ke `#toc-container`
69
    makeSortable(g.children[0]);
70
}
71
​
72
​
73
// Skrip asinkron untuk memanggil feed dan memicu fungsi `generateTOC`
74
(function () {
75
    var h = document.getElementsByTagName('head')[0],
76
        s = document.createElement('script');
77
    s.src = "https:////idtutorplus.blogspot.com/feeds/posts/summary?alt=json-in-script&max-results=9999&callback=generateTOC";
78
    h.appendChild(s);
79
})();
1
 
1
<div id="toc-container">Memuat...</div>