Pengurutan tabel dengan PHP dan jQuery
Hari ini kita akan mencari tahu bagaimana mengurutkan tabel dengan bantuan jQuery, lebih spesifiknya tabel yang dihasilkan dari database SQL (MySQL, SQLite, Postgree, dan sebagainya).
Fungsi jQuery disini tidak sebagai pengurut tapi hanya mengirimkan variabel ke server yang selanjutnya diproses oleh PHP. Alasannya karena lebih cepat dan mudah!
Sedikit mengingat jika ada yang lupa.
Sisi PHP hanya melakukan pemeriksaan nilai (GET biasanya) untuk diteruskan ke perintah SQL, jadi hanya variabel saja yang kita butuhkan disini dan apabila ingin nilai tersebut selalu diingat bisa kita gunakan fungsi SESSION :
<?php
// Jika dilakukan POST atau GET bernama 'sort' kita masukkan nilainya kedalam variabel dan kedalam SESSION
if (isset($_POST['sort']) AND !empty($_POST['sort'])) {
$sort = $_SESSION['sort'] = $_POST['sort'];
}
elseif (isset($_GET['sort']) AND !empty($_GET['sort'])) {
$sort = $_SESSION['sort'] = $_GET['sort'];
}
// Jika tidak ada, gunakan nilai default
else
$sort = (!empty($_SESSION['sort'])) ? $_SESSION['sort'] : 'nomor';
?>
Baris pertama kita inisialisasikan SESSION
Selanjutnya kita cek apakah ada nilai POST yang bernama sort jika ada masukkan nilai tersebut kedalam SESSION dan variabel $sort dan baris ini digunakan oleh jQuery.
Pada baris berikutnya kita cek nilai GET yang fungsinya sama seperti baris sebelumnya, baris ini digunakan apabila JavaScript tidak aktif.
Di baris selanjutnya merupakan proses default apabila tidak ada nilai POST atau GET yang diset, nilai yang diberikan adalah row yang ingin kita jadikan row default (contoh diatas bernama nomor ).
Setelah variabel dari PHP diperoleh, barulah variabel tersebut dimasukkan kedalam perintah SQL :
query("SELECT row_database FROM nama_database ORDER BY $sort")
Secara default pengurutan dilakukan secara ascending atau dari nilai terkecil.
Setelah PHP selesai dibahas kita lanjutkan dengan bagian html.
Buat tabel seperti biasa, dengan sedikit tambahan agar row tabel itu bisa diurutkan :
<table>
<thead>
<tr>
<th>Nomor</th>
<th class="sort" id="tanggal">
<a href="?sort=tanggal">Tanggal Lahir</a>
</th>
<th class="sort" id="nama">
<a href="?sort=nama">Nama</a>
</th>
</tr>
</thead>
<tbody id="tbody">
<!-- isi tabel -->
</tbody>
</table>
Yang akan dikenali oleh jQuery untuk mengurutkan tabel adalah class yang bernama sort dimana nama id = nama row database yang ingin diurutkan, sedangkan tag a href digunakan apabila JavaScript tidak aktif.
Fungsi jQuery yang dipakai sama seperti tutorial sebelumnya yaitu $.ajax dengan metode POST :
$('.sort').click(function(){
$.ajax({
type: 'POST',
data: 'sort=' + $(this).attr('id'),
success: function(data){
$('tbody').empty().append(data);
}
});
return false;
});
Data yang dikirim bernama sort bernilai string, dimana nilai tersebut = nama row database yang ingin diurutkan.
Sampai disini selesailah proses pengurutan tabel dengan PHP dan jQuery, mudah – mudahan bermanfaat!
Oiya, source code selain bisa didownload langsung(zip) bisa juga dilihat pada github
2 Komentar
Franmas. saat ini saya lg buat web application. pake php, jquery, database sql server 2003. nah yg jd kesulitan di saya itu tampilin data nya berupa tabel yg bs disort pd setiap field headernya, apakah mas bs ksh saran dan cth? dan apakah kalo database nya sql server bs dipaging jg?
trims
jenggocoba langsung didownload hasil tutorial diatas, persis seperti yang mas fran butuhkan hanya berbeda dari database yang dipakai (sqlite)