Dokumen Ary

Belajar adalah suatu investasi yang tak ternilai harganya

List Data dengan Plugin Jquery DataTables

List data merupakan komponen yang sering di gunakan untuk menampilkan data-data yang kita punyai, banyak jenis cara menampilkan data, misalnya berbentuk tabel seperti ini :

18-12-2012 0-55-58

atau dalam bentuk list seperti ini :

18-12-2012 0-54-48

Dalam menampilkan daftar data, ada beberapa komponen yang harus ada, di antaranya list data itu sendiri, paginasi jika data berjumlah ratusan atau ribuan, form searching untuk data untuk pencarian data, pengurutan data berdasarkan kriteria tertentu dan banyak lagi yang lainnya tergantung kebutuhan.

Jika penampilan data tersebut diimplementasikan dengan bahasa tertentu misalnya PHP + Mysql tidaklah gampang, ada beberapa aksi yang harus kita sediakan untuk menangani pencarian, pengurutan dan sebagainya, belum lagi kita harus menyiapkan paginasi nya yang cukup rumit.

Namun semua kesulitan itu dapat dengan mudah kita tangani jika kita menggunakan plugin jquery yang bernama DataTables, kita sangat dimudahkan dalam urusan penanganan list data tersebut. Untuk melihat hasilnya seperti apa, sudah saya sediakan contoh hasilnya bisa dilihat di SINI.

Dalam contoh tersebut, data yang saya tampilkan adalah data yang diambil dari database, berikut cara penerapannya :

1. Download dulu plugin jquery Datatables nya di http://datatables.net/

2. Cara pemanggilan plugin nya mudah, seperti berikut :

<html>
<header>
<style type="text/css" title="currentStyle"> 
    @import "css/demo_table_jui.css";
    @import "css/jquery-ui-1.8.4.custom.css";
</style>
<script type="text/javascript" language="javascript" src="js/jquery.js"></script>
<script type="text/javascript" language="javascript" src="js/jquery.dataTables.js"></script>
<script type="text/javascript" charset="utf-8">
  $(document).ready(function() {
       oTable = $('#example').dataTable({
         "bJQueryUI": true,
         "sPaginationType": "full_numbers"
       });
  } );
</script>
</header>
</body>
   ......
</body>
</haml>

Pada contoh script di atas, folder css dan js saya letakkan sejajar dengan file yang akan di isi script di atas.

Diatas terdapat script

oTable = $('#example').dataTable({

berarti tabel yang akan di deteksi oleh plugin datatables adalah tabel yang mempunyai properti id=”example”, jadi anda tinggal membuat list data  yang mempunyai id=”example”, contoh :

<table id="example">
  <thead>
     <tr>
        <th>Rendering engine</th>
        <th>Browser</th>
        <th>Platform(s)</th>
        <th>Engine version</th>
        <th>CSS grade</th>
     </tr>
  </thead>
  <tbody>
      <tr class="gradeX">
         <td>Trident</td>
         <td>Internet Explorer 4.0</td>
         <td>Win 95+</td>
         <td class="center">4</td>
         <td class="center">X</td>
      </tr>
      <tr class="gradeC">
         <td>Trident</td>
         <td>Internet Explorer 5.0</td>
         <td>Win 95+</td>
         <td class="center">5</td>
         <td class="center">C</td>
      </tr>
   </tbody>
</table>

Anda juga bisa merubah deklarasi id yaitu example menjadi sesuai keinginan anda pada script pada bagian head di atas, dan tentunya anda juga merubah properti id pada tabel anda.

Untuk membuat warna pada data anda bisa menambahkan class pada tag tr anda dengan (gradeA, gradeC, gradeX, gradeU) sesuai selera anda.

Demikian artikel kali ini, semoga bisa memberi pengetahuan tambahan untuk anda 🙂

DOWNLOAD FILE CONTOH

11 responses to “List Data dengan Plugin Jquery DataTables

  1. Yeyep Sudrajat March 16, 2013 at 4:55 am

    Mas Ary…bagaimana penerapan plugin jquery datatable ini pada modul2 di cms lokomedia untuk versi 1.6.1, misal pada modul users, mohon dibuat tutorial dan contohnya Mas Ary..terima kasih banyak.

  2. Pingback: Memasang Jquery DataTables Di CMS Lokomedia | Dokumen Ary

  3. hendriansyah May 8, 2013 at 8:44 am

    dapat dari adobe widget kayaknya tu

  4. yunan September 2, 2013 at 4:28 am

    [ASK]
    maximal data yang dapat ditampilkan di plugins datatable berapa yaa???

  5. Yoga Satria Putra July 16, 2014 at 1:47 am

    Mas Ari, bagaimana caranya menjalankan fungsi paging, search, dan sortnya? sudah nyoba2 gagal ga bisa jalan hanya nampil doang. mohon bantuannya terimakasih 🙂

  6. Pingback: Memasang Jquery DataTables Di CMS Lokomedia - FAJAR INGGIT.IN

  7. Secret Admirer February 5, 2016 at 9:31 pm

    mas ari, kalau kita ma ngeprint hasil dari pencarian kita di data tabel jquery itu bisa nggak mas ? jadi bukan semua data tabel itu yang mau di print, melainkan cuman yang di tampilin waktu kita melakukan pencarian di datatable jquery ?
    terima kasih

  8. Vivi Silvira March 14, 2020 at 6:52 am

    keren bet bang, kayaknya aku harus banyak-banyak belajar dari abang nih.semoga dari website abang ini saya bisa belajar php dengan baik ,perkenalkan nama saya Vivi Silvira dari STMIK Atma Luhur (https://www.atmaluhur.ac.id/)

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google photo

You are commenting using your Google account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s

%d bloggers like this: