Please enable JavaScript!
Bitte aktiviere JavaScript!
S'il vous plaît activer JavaScript!
Por favor,activa el JavaScript!
antiblock.org

 |  |  | 
Anda ingin membuat website?
Untuk Anda yang sedang mencari orang untuk jasa pembuatan website, Saya akan bantu buatkan aplikasi sesuai kebutuhan Anda. Segera hubungi : mail@rizaldimaulidia.com. Selengkapnya tentang profil saya klik www.rizaldimaulidia.com.

JQuery PHP

Cara Menggunakan jQuery DataTables dengan PHP dan MySQL

img-responsive

JQuery DataTables adalah sebuah plugin / library yang membantu web developer dalam menyajikan daftar / list data dari database dalam bentuk tabel yang sudah dilengkapi dengan Fitur Pencarian, Fitur Pagination, Fitur Sorting dan Fitur Limit data per halaman. Sebenarnya semua itu bisa kita buat sendiri, hanya saja jika kita menggunakan librari ini tentunya akan menghemat waktu pembuatan website kita karena kita tidak harus membuat fitur-fitur tadi yang disediakan oleh datatables.

Sebelumnya mungkin Anda pernah membaca tutorial saya mengenai Cara Membuat Pencarian Plus Pagination Tanpa Refresh dengan PHP. Tutorial tersebut hampir mirip hasilnya dengan yang akan kita buat disini, cuman memang ada beberapa fitur yang tidak ada pada tutorial tersebut. Tapi secara fungsi intinya adalah menyajikan data dalam bentuk tabel dengan fitur pagination + pencarian. Pada tutorial ini juga kita akan menerapkan JQuery DataTables (Server Side) + Bootstrap agar tampilannya lebih menarik.

Kita akan menggunakan jQuery DataTables yang versi server side, karena ketika data yang di tampilkan sangat banyak, versi server side ini tetap akan menampilkan datanya secara cepat. Konsepnya seperti halnya pagination, jadi pada saat load, yang di load hanya beberapa data sesuai limit per halaman yang sudah di tentukan. beda dengan jQuery DataTables yang versi client side, ketika di load datatables akan melakukan load semua data pada saat pertama kali load, tentunya cara ini sangat tidak efektif apabil datanya sangat banyak.


DEMO
Sebelum masuk ke tutorialnya. Mungkin ada yang mau lihat demonya terlebih dahulu. Silahkan klik link berikut untuk melihat demonya : Lihat Demo.


STEP 1 – PERSIAPAN
Kita akan mempersiapkan terlebih dahulu hal-hal yang diperlukan.

  1. Download librari JQuery DataTables nya, klik link berikut ini : Download.
  2. Download plugin jQuery, klik link berikut : Download.
  3. Download librari Bootstrap, klik link berikut ini : Download.
  4. Buat sebuah folder baru dengan nama datatables_php, lalu simpan di xampp/htdocs/
  5. Buat sebuah folder dengan nama css, lalu simpan di xampp/htdocs/datatables_php.
  6. Buat sebuah folder dengan nama js, lalu simpan di xampp/htdocs/datatables_php.
  7. Ekstrak dan Copy librari JQuery DataTables yang sudah didownload ke dalam folder xampp/htdocs/datatables_php/.
  8. Copy and paste file jquery.min.js yang telah di download tadi ke dalam folder xampp/htdocs/datatables_php/js/.
  9. Esktrak file bootstrap.7z yang telah didownload tadi.
  10. Copy and paste folder fonts dari folder bootstrap yang telah diekstrak tadi ke folder xampp/htdocs/datatables_php/.
  11. Copy and paste file bootstrap.min.css dari folder bootstrap/css/ yang telah diekstrak tadi ke folder xampp/htdocs/datatables_php/css/.

STEP 2 – DATABASE
Buat sebuah database dengan nama mynotescode, lalu buat tabel siswa dengan struktur tabel seperti gambar berikut ini :

Struktur Tabel - Cara Menggunakan JQuery DataTables dengan PHP dan MySQL

CREATE TABLE `siswa` (
  `nis` varchar(11) NOT NULL PRIMARY KEY,
  `nama` varchar(50) NOT NULL,
  `jenis_kelamin` varchar(10) NOT NULL,
  `telp` varchar(15) NOT NULL,
  `alamat` text NOT NULL
)

STEP 3 – KONEKSI DATABASE
Pada tahap ini, kita akan membuat sebuah file php yang berfungsi untuk koneksi ke database MySQL. Buat sebuah file dengan nama koneksi.php lalu simpan di folder xampp/htdocs/datatables_php/. Berikut ini isi dari file tersebut :

<?php
$host = 'localhost'; // Nama hostnya
$username = 'root'; // Username
$password = ''; // Password (Isi jika menggunakan password)
$database = 'mynotescode'; // Nama databasenya

// Koneksi ke MySQL dengan MySQLi
$connect = mysqli_connect($host, $username, $password, $database);
?>

STEP 4 – TAMPILAN
Selanjutnya buat sebuah file php dengan nama index.php dan simpan di folder xampp/htdocs/datatables_php. Berikut ini tampilan dan kodenya :

View - Cara Menggunakan JQuery DataTables dengan PHP dan MySQL

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">

    <title>Implementasi Jquery Datatable dengan PHP</title>

    <!-- Load Datatable & Bootsrap CSS -->
    <link rel="stylesheet" type="text/css" href="css/bootstrap.min.css"/>
    <link rel="stylesheet" type="text/css" href="datatables/lib/css/dataTables.bootstrap.min.css"/>
  </head>
  <body>
    <div class="container">
      <div style="background: whitesmoke;padding: 10px;">
        <h1 style="margin-top: 0;">Implementasi Jquery Datatable dengan PHP</h1>
      </div>

      <div class="table-responsive">
        <table class="table table-bordered" id="table-siswa">
          <thead>
            <tr>
              <th>NIS</th>
              <th>Nama</th>
              <th>Jenis Kelamin</th>
              <th>Telepon</th>
              <th>Alamat</th>
              <th>Aksi</th>
            </tr>
          </thead>
          <tbody></tbody>
        </table>
      </div>
    </div>

    <!-- Load Jquery & Datatable JS -->
    <script type="text/javascript" src="js/jquery.min.js"></script>
    <script type="text/javascript" src="datatables/datatables.min.js"></script>
    <script type="text/javascript" src="datatables/lib/js/dataTables.bootstrap.min.js"></script>
    <script>
    var tabel = null;

    $(document).ready(function() {
        tabel = $('#table-siswa').DataTable({
            "processing": true,
            "serverSide": true,
            "ordering": true, // Set true agar bisa di sorting
            "order": [[ 0, 'asc' ]], // Default sortingnya berdasarkan kolom / field ke 0 (paling pertama)
            "ajax":
            {
                "url": "http://localhost/datatables_php/view.php", // URL file untuk proses select datanya
                "type": "POST"
            },
            "deferRender": true,
            "aLengthMenu": [[5, 10, 50],[ 5, 10, 50]], // Combobox Limit
            "columns": [
                { "data": "nis" }, // Tampilkan nis
                { "data": "nama" },  // Tampilkan nama
                { "render": function ( data, type, row ) {  // Tampilkan jenis kelamin
                        var html = ""

                        if(row.jenis_kelamin == 1){ // Jika jenis kelaminnya 1
                            html = 'Laki-laki' // Set laki-laki
              }else{ // Jika bukan 1
                            html = 'Perempuan' // Set perempuan
                        }

                        return html; // Tampilkan jenis kelaminnya
                    }
                },
                { "data": "telp" }, // Tampilkan telepon
                { "data": "alamat" }, // Tampilkan alamat
                { "render": function ( data, type, row ) { // Tampilkan kolom aksi
                        var html  = "<a href=''>EDIT</a> | "
                        html += "<a href=''>DELETE</a>"

                        return html
                    }
                },
            ],
        });
    });
    </script>
  </body>
</html>

var tabel = null;
Kenapa saya buat kode ini? agar nantinya ketika Anda ingin refresh datatables, Anda tinggal jalankan kode tabel.ajax.reload(). Variabel tabel ini akan kita set / isi dengan konfigurasi datatables.

“ajax”:
{
url“: “http://localhost/mynotescode/datatables_php/view.php”, // URL file untuk proses select datanya
type“: “POST”
}
Ada 2 atribut yang kita gunakan pada konfigurasi ajaxnya yakni atribut url yang berisi URL file yang kita gunakan untuk proses selecting data ke database, Dalam tutorial ini kita set ke file view.php yang akan kita buat pada step selanjutnya. Lalu ada atribut type, atribut ini kita isi dengan “POST”. Atribut type ini sama dengan atribut method yang ada di tag form (&lt;form method=&quot;post&quot;&gt;)

“aLengthMenu”: [[5, 10, 50],[ 5, 10, 50]]
Kode diatas untuk menentukan pilihan pada combo box “Show Entries Limit” seperti yang saya tunjukan dengan tanda panah merah pada gambar dibawah ini :

Show Entries Limit - Cara Menggunakan JQuery DataTables dengan PHP dan MySQL

“columns”: [….]
Di dalam konfigurasi columns, terdapat atribut-atribut data seperti { “data”: “nis” }, { “data”: “nama” }, yang saya beri warna merah itu harus sama dengan kolom / field yang ada di tabel siswa pada database.

{ “render”: function ( data, type, row ) {
Dalam konfigurasi columns juga terdapa kode diatas, kode ini digunakan apabila anda ingin melakukan kustom view pada kolom tersebut (Sesuai urutan pada tag table -> thead). Dalam kasus ini kita gunakan kode ini pada 2 kolom yakni kolom Jenis Kelamin dan Kolom Aksi. Dalam kode tersebut juga terdapat variabel row (yang saya beri warna merah), dari variabel tersebut kita bisa mengakses / mengambil nilai atau isi dari kolom-kolom lain (sesuai yang di select pada view.php). Cara memanggilnya yaitu row.nama_field. Contoh row.nis untuk mengambil data nis, row.nama untuk mengambil data nama, dan seterusnya.


STEP 5 – View
Terakhir kita buat sebuah file php dengan nama view.php dan simpan di folder xampp/htdocs/datatables_php. Berikut ini kodenya :

<?php
include "koneksi.php"; // Load file koneksi.php

$search = $_POST['search']['value']; // Ambil data yang di ketik user pada textbox pencarian
$limit = $_POST['length']; // Ambil data limit per page
$start = $_POST['start']; // Ambil data start

$sql = mysqli_query($connect, "SELECT nis FROM siswa"); // Query untuk menghitung seluruh data siswa
$sql_count = mysqli_num_rows($sql); // Hitung data yg ada pada query $sql

$query = "SELECT * FROM siswa WHERE (nis LIKE '%".$search."%' OR nama LIKE '%".$search."%' OR telp LIKE '%".$search."%' OR alamat LIKE '%".$search."%')";
$order_index = $_POST['order'][0]['column']; // Untuk mengambil index yg menjadi acuan untuk sorting
$order_field = $_POST['columns'][$order_index]['data']; // Untuk mengambil nama field yg menjadi acuan untuk sorting
$order_ascdesc = $_POST['order'][0]['dir']; // Untuk menentukan order by "ASC" atau "DESC"
$order = " ORDER BY ".$order_field." ".$order_ascdesc;

$sql_data = mysqli_query($connect, $query.$order." LIMIT ".$limit." OFFSET ".$start); // Query untuk data yang akan di tampilkan
$sql_filter = mysqli_query($connect, $query); // Query untuk count jumlah data sesuai dengan filter pada textbox pencarian
$sql_filter_count = mysqli_num_rows($sql_filter); // Hitung data yg ada pada query $sql_filter

$data = mysqli_fetch_all($sql_data, MYSQLI_ASSOC); // Untuk mengambil data hasil query menjadi array
$callback = array(
    'draw'=>$_POST['draw'], // Ini dari datatablenya
    'recordsTotal'=>$sql_count,
    'recordsFiltered'=>$sql_filter_count,
    'data'=>$data
);

header('Content-Type: application/json');
echo json_encode($callback); // Convert array $callback ke json
?>

Inti dari file view.php ini adalah mengeluarkan output berupa json (sesuai yang dijelaskan pada example dari website datatables nya : klik disini) seperti dibawah ini :

{  
   "draw":"1",
   "recordsTotal":0,
   "recordsFiltered":0,
   "data":[....]
}

Titik-titik yang ada pada variabel data dalam json diatas nantinya akan terisi hasil query select ke database, dalam tutorial ini berarti yang muncul adalah data-data siswa. Berikut ini json hasil dari tutorial ini :

{
   "draw":"1",
   "recordsTotal":24,
   "recordsFiltered":24,
   "data":[
      {
         "nis":"10110470110",
         "nama":"Ade Zenudin Bimashita",
         "jenis_kelamin":"1",
         "telp":"08199288272",
         "alamat":"Tegal"
      },
      {
         "nis":"10110470111",
         "nama":"Ani Lestari",
         "jenis_kelamin":"2",
         "telp":"089228827727",
         "alamat":"Jakarta"
      },
      {
         "nis":"10110470112",
         "nama":"Imam Maulana",
         "jenis_kelamin":"1",
         "telp":"08561777166",
         "alamat":"Bandung"
      },
      {
         "nis":"10110470113",
         "nama":"Siska Melina Rachman",
         "jenis_kelamin":"2",
         "telp":"0828817717",
         "alamat":"Bandung"
      },
      {
         "nis":"10110470114",
         "nama":"Diki Somantri",
         "jenis_kelamin":"1",
         "telp":"081662662771",
         "alamat":"Padang"
      }
   ]
}

$sql = mysqli_query($connect, $query);
Untuk mengeksekusi / menjalankan query sql. struktur dasar penulisannya adalah sebagai berikut :

mysqli_query($connect, $query);

/*
Keterangan :
- $connect : diisi dengan koneksi ke mysql. hasil dari mysqli_connect
- $query : diisi dengan Query SQL yang diinginkan
*/

mysqli_fetch_all($sql_data, MYSQLI_ASSOC);
Untuk mengambil data dari hasil eksekusi suatu query sql. Struktur dasar penulisannya adalah sebagai berikut :

mysqli_fetch_all(result, resulttype);

/*
Keterangan :
- result: diisi dengan hasil eksekusi query sql(mysql_query())
- resulttype (opsional) isinya ada 3 : MYSQLI_ASSOC, MYSQLI_NUM, MYSQLI_BOTH
*/

Mungkin sekian untuk catatan kali ini. Semoga bisa bermanfaat. Jika ada yang kurang dipahami, langsung tanyakan pada form komentar dibawah ini. Jangan lupa LIKE dan SHARE nya, Terimakasih banyak.

Happy Coding ^_^


SOURCE CODE
Untuk mengunduh source code nya, klik salah satu link dibawah ini
– Download versi MySQLi : Link download yang sesuai tutorial ini yakni menggunakan fungsi MySQLi untuk query ke databasenya
– Download versi PDO : Link download untuk Anda yang ingin source code versi PDO dari tutorial ini


SUMBER & REFERENSI
https://www.datatables.net/examples/server_side/
https://www.datatables.net/examples/server_side/post.html
Cara mudah menggunakan jQuery DataTables dengan php dan mysql, tutorial lengkap menggunakan jQuery DataTables dengan php dan mysql, Implementasi jQuery DataTables dengan PHP dan MySQL, tutorial step by step menggunakan jQuery DataTables dengan PHP dan MySQL

DataTables

(Total : 26,268 viewers, 1 viewers today)
jquery-datatables-dengan-php-dan-mysql

ABOUT THE AUTHOR

Interested in android programming, long time focused on web development. Visit My Profile Site at www.rizaldimaulidia.com

POST YOUR COMMENTS TO Rizaldi Maulidia Achmad (Cancel)

Your email address will not be published. Required fields are marked *

Name *

Email *

Website

22 Comments

  1. mas yudha

    tutornya sangat membantu mas Rizal..
    setelah saya praktekkan sudah bisa sesuai harapan.
    oya klo saya mau menambahkan kondisi WHERE itu diletakkan dimana ya? di index atau view.php
    jd saat Load data di file index.php dijalankan yang tampil sesuai kriteria, misal WHERE alamat=’Padang’
    Terima kasih atas pencerahannya..

    • sama-sama om, senang bisa membantu 😀
      Untuk menambahkan where, tambahkan di view query where nya om.

  2. doddy_hr

    tutornya bisa berjalan baik mas di aplikasi saya. memang ini yg saya cari krn bisa load data dengan cepat jika datanya sangat banyak. ada satu pertanyaan, di view.php, baris bagian mana jika saya ingin data yg ditampilkan pd tabel muncul otomatis urut nama secara ASC/DESC atau alamat secara ASC/DESC?
    Terima kasih atas tutornya yg sangat membantu

    • doddy_hr

      hehehe .. maaf sudah ketemu mas..settingnya ternyata di file index.php nya..
      yg ini –> “order”: [[ 0, ‘asc’ ]],

      terima kasih atas tutornya yg bermanfaat..

    • Yang harus diubah bukan pada file view.php, tapi pada file index.php. tepatnya bagian ini :
      "order": [[ 0, 'asc' ]], // Default sortingnya berdasarkan kolom / field ke 0 (paling pertama)

      disitu saya sudah jelaskan juga bahwa coding itu adalah setting default untuk sorting nya. tinggal disesuaikan om mau sorting defaultnya dengan kolom ke berapa (kolom 0 adalah kolom pertama pada tabel).

      Sama-sama, senang bisa membantu 😀

  3. arif amanu

    untuk menambahkan nomor urut (no 1 s.d no terakhir)
    bagaimana mas? bisa dibantu?

  4. huda sans

    makasih banyak mas. kebetulan sedang nyari referensi tentang load yang optimal

  5. Bagas Adi

    Halo mas, ko saya mau download yg versi myqli tidak bisa yah, web nya loading terus.. sama yg di view.php itu ko yg ‘draw’ => $_POST[‘draw’] dia undefined yah

    • mungkin koneksi internet om sedang bermasalah, saya coba bisa tidak ada kendala
      undefined? jquery datatablesnya sudah di load?

  6. Ani Resky

    Assalamu’alaikum, saya mau tanya gan, untuk query select yang ada d’file view.php apakah bisa saya ORDER BY (nama field) DESC berdasarkan field yang ada pada tabel yang saya buat ?

  7. kennedy123

    Malam gan, mau nanya jika edit sama delete nya langsung di table nya tanpa refresh cara nya gimana? makasih gan

  8. Hardian Permana

    linknya di arahkan kesini gan

    <a href='detailemp.php?NIK=" + row.NIK + "' rel="nofollow">

    halaman detailnya sudah di buat
    nah di url sudah muncul NIKnya gan seperti ini
    “detailemp.php?NIK=1234”

    buat muncculkan si NIK itu gimana ya gan? contohnya kaya echo $_POST[‘NIK’]; saya pake cara yang $_POST ini ga bisa

  9. Hardian Permana

    gan, saya mau tampilkan detail data di dalam tag href gimana caranya ya gan?

    { “data”: “NPK” }, // Tampilkan NPK
    { “data”: “Nama” }, // Tampilkan Nama
    { “data”: “Dept” }, // Tampilkan Dept
    { “render”: function ( data, type, row ) { // Tampilkan kolom aksi
    var html = “<a><i></i> View Detail</a> ”
    return html
    }
    },

    saya coba kaya gini ga bisa gan, gimana ya gan?

  10. Kiho Nian

    gan, kalau mau menampilkan data didalam tag href bagaimana caranya?

    misal kalau dengan php biasa buat begini utk menam[ilkan id : &lt;a href=&#039;edit.php?id_siswa='&gt;EDIT</a>

    utk kasus seperti ini, mohon pencerahan. terima kasih sebelumnya

    { "render": function ( data, type, row ) {
    var html = "<a href='edit?id_siswa=' rel="nofollow">EDIT</a> | "
    html += "<a href='delete.php?id_siswa=' rel="nofollow">DELETE</a>"
    return html
    }
    },

    saya coba buat var html = "<a href='edit?id_siswa=row.id_siswa' rel="nofollow">EDIT</a> | "

    tidak bisa

    • dikeluarin dari kutipnya dulu om. jadi gini :
      { "render": function ( data, type, row ) {
      var html = "<a href='edit?id_siswa=" + row.id_siswa + "' rel='nofollow'>EDIT</a> | "
      html += "<a href='delete.php?id_siswa=" + row.id_siswa + "' rel='nofollow'>DELETE</a>"
      return html
      }
      },

NOTE ARCHIVES