Dokumen RKP Desa Tahun 2024 ini merupakan suatu dokumen yang harus disusun
sebagai tuntutan penyelenggaraan tata pemerintahan desa yang baik dalam
melaksan...
JavaScript Table Sorter
Skrip ini bisa digunakan untuk menyortir tabel dengan tampilan yang sederhana:
// Original code: https://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-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;
}
<table class="table-sortable" id="table-1">
<thead>
<tr><th>Header 1</th><th>Header 2</th><th>Header 3</th></tr>
</thead>
<tbody>
<!-- Sortable rows -->
<tr><td> ... </td><td> ... </td><td> ... </td></tr>
<tr><td> ... </td><td> ... </td><td> ... </td></tr>
<tr><td> ... </td><td> ... </td><td> ... </td></tr>
...
</tbody>
</table>
<script>makeSortable(document.getElementById('table-1'));</script>
4 comments