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

  • Damar Zaky

    ikut meramaikan suasana :D

  • 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:].

  • zahrotul wahyudi

    mantaf nih infonya..nuwun mas bro..

  • Pantun Simanjuntak

    waduh gak bisa dibalikin jadi urutan yang semula

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