Ticker

6/recent/ticker-posts

Sorting / Urutkan Isi Table Dengan Menggunakan JQuery

Desember 22, 2016
Pada JQuery tehnik untuk mengurutkan data di table halaman HTML adalah table sorter lebih teptnya menggunakan jquery plugin bernama tablesorter.  Teknik yang digunakan oleh table sorter hanya menggunakan javascript sehingga tidak perlu harus koneksi keserver.

Dalam mengimplementasikan tehnik ini sangat lah mudah cukup dengan satu baris kode $("#idtabel").tablesorter(); maka sebuah tabel web menjadi sebuah tabel yang bisa diurutkan. seperti contoh berikut :



<html>
<head>
<link rel="stylesheet" type="text/css" href="style.css" />
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript" src="jquery.tablesorter.js"></script>
 
<script type="text/javascript">
$(document).ready(function()
  {
    $("#idtable").tablesorter();
  }
);
</script>
</head>
<body>
<h3> Klik header untuk mengurutkan data </h3>
<table id="idtable">
<thead>
<tr>
  <th>NIP</th>
  <th>Nama Pegawai</th>
  <th>Umur</th>
</tr>
</thead>
<tbody>
<tr>
  <td>1500001</td>
  <td>Cristiano Ronaldo</td>
  <td>27</td>
</tr>
<tr>
  <td>1500002</td>
  <td>Lionel Messi</td>
  <td>28</td>
</tr>>32</td>
</tr>
</tbody>
</table>
</div>
</body>
</html>
Setelah kode di buat dan dijalankan di browser, bagaimana cara menjalankan perintah sortingnya? sangatlah mudah cukup klik bagian header tiap kolom table, maka isi table akan berurut seseuai kolom yang di klik.
Sering sekali kita membuat suatu table dan di bagian paling bawah table tersebut dibuat baris jumlah atau total, dan bagian baris itu tidak ingin kita sorting. Sedangkan secara default dengan kode diatas semua row / baris yang ada di tabel tersebut akan ke sorting. Caranya sangat mudah cukup dengan membungkus row atau baris yang tidak akan kita urutkan /sorting dalam tag <tfoot> </tfoot>
seperti contoh berikut,
<table id="idtable">
<thead>
<tr>
  <th>NIP</th>
  <th>Nama Pegawai</th>
  <th>Umur</th>
  <th>Jumlah Anak</th>
</tr>
</thead>
<tbody>
<tr>
  <td>1500001</td>
  <td>Cristiano Ronaldo</td>
  <td>27</td>
  <td>2</td>
</tr>
<tr>
  <td>1500002</td>
  <td>Lionel Messi</td>
  <td>28</td>
  <td>1</td>
</tr>
</tbody>
<tfoot>

<tr>
  <td colspan="2">Jumlah Anak Semua Karyawan</td>
  <td>3</td>
</tr>
</tfoot>
</table>
Unknown

Diposting oleh Unknown

Posting Komentar

0 Komentar