Mecha versi 2.6.3 sudah dirilis!

JavaScript Table Sorter

Tabel Konten
  1. JavaScript 
  2. CSS 
  3. HTML 
  4. Demo 

Skrip ini bisa digunakan untuk menyortir tabel dengan tampilan yang sederhana:

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

CSS 

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

HTML 

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

Meski masih ada sedikit kekurangan karena fungsi sortir ini hanya memakai logika berdasarkan abjad. Coba Anda klik pada header Harga. Hasilnya tidak akan sesuai dengan apa yang kita harapkan. Masih sedang mencari solusi yang paling mudah untuk menangani satuan harga pada fungsi ini…

Demo 

Lihat Demo

14 Komentar

Unknown

Luar binasa kreatifitas mas tovic,,, :-bd

Unknown

Walaupun bukan script dari Kang Taufik, tapi terima kasih sudah memberi tahu dan menyebarluaskan....ini bisa digunakan untuk sitemap juga ya kang ?

Taufik Nurrohman

Bisa, selama fungsi dipicu setelah widget termuat. Saya sudah membuat contohnya di sini ⇒ http://jsfiddle.net/tovic/YtLvB/2/embedded/result,html,js,css. Baca komentar-komentarnya di dalam panel JavaScript.

Saya tidak akan memasukkan widget ini ke dalam posting baru yang lain di blog ini. Kalau ada yang mau menyalin dan berbagi kode ini tinggal klik saja tombol Fork, lalu buat tutorialnya sendiri setelah berhasil menerapkannya.

kontol ajing pepek

bagus juga nih kalo dipakai buat daftar isi, thanks to tovic :D ahay
btw, blognya ada sisa kosong di kanan akibat width blog tidak 100% kalo monitornya widescreen pasti kelihatan

no data

saya juga om nyikut,
absen juga :D

test

wah da mas rio us juga di sini ^_^

Saeful Rahman

wow hebat mas Taufik, saya coba untuk menerapkannya. Makin hari makin salut aja sama DTE:].

Masiki

gan mau nanya..
Javascriptnya tuh di taruh dimana ya.??
saya taruh di atau kok ada error ya..

disini
"th && (th = th.rows[0]) && (th = th.cells);"

dan disini "j < jen; ++j)"

maaf gan kalau ganggu.

Unknown

gan, kasih tw letak2 tempat naronya donk

Komentar telah ditutup.