Cara Membuat Tabel Sorting Dengan Bootstrap dan Javascript

Cara Membuat Tabel Sorting Dengan Bootstrap dan Javascript - Tabel sorting adalah sebuah tabel yang ditambahkan sebuah fitur untuk mengurutkan data yang ada dalam setiap baris dari suatu kolom dalam tabel baik secara Ascending maupun descending. Apabila kita memuat list data dalam bentuk baris dalam tabel kemudian data yang di tampilkan tersebut berjumlah cukup banyak maka akan sulit bagi kita untuk melihatnya apalagi jika data tersebut tidak tersusun dan berantakan.

Dengan adanya sort kita dapat lebih mudah mengurutkan data kita hanya perlu mengklik pada bagian header dari setiap kolom maka baris data yang ada akan tersusun otomatis. hal ini dapat terwujudkan dengan adanya tambahan Javascript dan bootstrap untuk tampilannya. Untuk lebih jelasnya langsung saja kita membuatnya.

Baca Juga : Cara Membuat Expanding Search Keren Dengan CSS3 dan Javascript

Untuk menulisakan script anda dapat menggunakan apa saja bebas, contoh : Notepad, Notepad++, Dreamwaver, NetBeans, Eclipse. Karena program ini cukup sederhana saya sarankan menggunakan Notepad atau Notepad++ saja sudah cukup.

CSS

Pertama buatlah sebuah folder dengan nama Tabel Sorting , sekarang untuk mempercantik bentuk tabel buka notepad++ kemudian buatlah sebuah file baru dan ketikan script berikut :

h2 {
  margin-bottom: 50px;
}

.container {
  text-align: center;
  overflow: hidden;
  width: 800px;
  margin: 0 auto;
}

.container table {
  width: 100%;
}

.container td, .container th {
  padding: 10px;
}

.container td:first-child, .container th:first-child {
  padding-left: 20px;
}

.container td:last-child, .container th:last-child {
  padding-right: 20px;
}

.container th {
  border-bottom: 1px solid #ddd;
  position: relative;
  cursor: pointer;
}

.container th.desc:after {
  border-top-color: #666;
}

.container th.asc:before {
  border-bottom-color: #666;
}

.container th:after, .container th:before {
  content: '';
  display: block;
  position: absolute;
  right: 0;
  border-color: transparent;
  border-style: solid;
  border-width: 5px;
  width: 0;
  height: 0;
}

.container th:after {
  border-top-color: #ddd;
  top: 22px;
}

.container th:before {
  border-bottom-color: #ddd;
  top: 10px;
}

.github {
  margin-top: 50px;
}

Simpan dalam folder Tabel Sorting dengan nama style.css

Javascript

Sekarang untuk sortingnya kita tambahkan javascript, buatlah sebuah file baru di Notepad++ kemudian ketikan script berikut :

(function(document) {
 'use strict';

 var LightTableSorter = (function(Arr) {

  var _th, _cellIndex, _order = '';

  function _text(row) {
   return row.cells.item(_cellIndex).textContent.toLowerCase();
  }

  function _sort(a, b) {
   var va = _text(a), vb = _text(b), n = parseInt(va, 10);
   if (n) {
    va = n;
    vb = parseInt(vb, 10);
   }
   return va > vb ? 1 : va < vb ? -1 : 0;
  }

  function _toggle() {
   var c = _order !== 'asc' ? 'asc' : 'desc';
   _th.className = (_th.className.replace(_order, '') + ' ' + c).trim();
   _order = c;
  }

  function _reset() {
   _th.className = _th.className.replace('asc', '').replace('desc', '');
   _order = '';
  }

  function onClickEvent(e) {
   if (_th && _cellIndex !== e.target.cellIndex) {
    _reset();
   }
   _th = e.target;
   _cellIndex = _th.cellIndex;
   var tbody = _th.offsetParent.getElementsByTagName('tbody')[0],
    rows = tbody.rows;
   if (rows) {
    rows = Arr.sort.call(Arr.slice.call(rows, 0), _sort);
    if (_order === 'asc') {
     Arr.reverse.call(rows);
    }
    _toggle();
    tbody.innerHtml = '';
    Arr.forEach.call(rows, function(row) { tbody.appendChild(row); });
   }
  }

  return {
   init: function() {
    var ths = document.getElementsByTagName('th');
    Arr.forEach.call(ths, function(th) { th.onclick = onClickEvent; });
   }
  };
 })(Array.prototype);

 document.addEventListener('readystatechange', function() {
  if (document.readyState === 'complete') {
   LightTableSorter.init();
  }
 });

})(document);

Simpan dalam folder Tabel Sorting dengan nama script.js

HTML

Sekarang untuk markupnya buatlah sebuah file baru lagi dengan notepad++ kemudian ketikan script berikut :

 




 
 


 

Tabel Sorting CSS dan Javascript

  


    
Name
    
Email
    
Phone
    
Price
   

  


    
Jin Toples
    
jin.doe@gmail.com
    
0123456789
    
99
   

    
Jane Toples
    
jane@toples.org
    
9876543210
    
349
   

    
Rengo Kolas
    
begi@batman.com
    
6754328901
    
199
   

 


 

Simpan dalam folder Tabel Sorting dengan nama index.html

Sekarang Tabel Sorting dengan Bootstrap dan Javascript anda sudah selesai anda dapat mencobanya dengan cara klik 2x pada file tersebut, disarankan membukanya dengan browser Chrome atau Mozilla, jangan menggunakan IE hehheeh jika di IE tidak jalan saya sudah tidak heran.

Anda juga dapat mengunduh file jadinya di sini : DOWNLOAD