Reload Page ❖ JavaScript Table Sorterweb created
Css
Jquery
Html
Result
Show Result

Edit in JSFiddle

xxxxxxxxxx
 
​

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

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

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

​x
 
1
// Original code: http://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
})();
95
 
1
<table class="table-sortable">
2
    <thead>
3
        <tr>
4
            <th style="width:60%;">Judul Buku</th>
5
            <th>Harga</th>
6
            <th>Status</th>
7
        </tr>
8
    </thead>
9
    <tbody>
10
        <!-- Sortable rows -->
11
        <tr>
12
            <td>Manusia dan Kebudayaan di Indonesia Koentjaraningrat</td>
13
            <td>Rp 75.000</td>
14
            <td>Bekas</td>
15
        </tr>
16
        <tr>
17
            <td>Pebble In The Shoe: Diplomatic Struggle For East Timor</td>
18
            <td>Rp 100.000</td>
19
            <td>Baru</td>
20
        </tr>
21
        <tr>
22
            <td>Membangun Negara Baru Timor Lorosae</td>
23
            <td>Rp 100.000</td>
24
            <td>Baru</td>
25
        </tr>
26
        <tr>
27
            <td>Edward W. Said — Covering Islam: Bias Liputan Barat</td>
28
            <td>Rp 55.000</td>
29
            <td>Bekas</td>
30
        </tr>
31
        <tr>
32
            <td>Wacana Masyarakat Dan Kebudayaan Jawa Pesisiran</td>
33
            <td>Rp 85.000</td>
34
            <td>Bekas</td>
35
        </tr>
36
        <tr>
37
            <td>Paradoks Papua</td>
38
            <td>Rp 40.000</td>
39
            <td>Bekas</td>
40
        </tr>
41
        <tr>
42
            <td>Political and Economic Systems</td>
43
            <td>Rp 60.000</td>
44
            <td>Bekas</td>
45
        </tr>
46
        <tr>
47
            <td>Melawan Ketertutupan Informasi</td>
48
            <td>Rp 35.000</td>
49
            <td>Bekas</td>
50
        </tr>
51
        <tr>
52
            <td>Profil Budaya Politik Indonesia</td>
53
            <td>Rp 35.000</td>
54
            <td>Bekas</td>
55
        </tr>
56
        <tr>
57
            <td>Agama Pragmatis: Telaah atas Konsepsi Agama John Dewey</td>
58
            <td>Rp 45.000</td>
59
            <td>Baru</td>
60
        </tr>
61
        <tr>
62
            <td>Jurnalisme Bencana, Bencana Jurnalisme</td>
63
            <td>Rp 50.000</td>
64
            <td>Baru</td>
65
        </tr>
66
        <tr>
67
            <td>Pemikiran Karl Marx</td>
68
            <td>Rp 25.000</td>
69
            <td>Bekas</td>
70
        </tr>
71
        <tr>
72
            <td>Bertahan Hidup di Gulag Indonesia, Carmel Budiardjo</td>
73
            <td>Rp 200.000</td>
74
            <td>Bekas</td>
75
        </tr>
76
        <tr>
77
            <td>Buku Pantja Warsa Manipol Panitia Pembina Jiwa Revolusi</td>
78
            <td>Rp 350.000</td>
79
            <td>Bekas</td>
80
        </tr>
81
        <tr>
82
            <td>Deliar Noer: Gerakan Moderen Islam 1900–1942</td>
83
            <td>Rp 150.000</td>
84
            <td>Bekas</td>
85
        </tr>
86
        <tr>
87
            <td>Sang Penguasa oleh Niccolo Machiavelli</td>
88
            <td>Rp 35.000</td>
89
            <td>Bekas</td>
90
        </tr>
91
    </tbody>
92
</table>
93
<script>
94
    makeSortable(document.getElementsByTagName('table')[0]);
95
</script>