Bootstrap DataTables JavaScript jQuery PHP

Menampilkan Data MySQL dengan DataTables Server-side Processing (PHP, Bootstrap)

datatables-serverside-processing
Written by Fatoni

Menampilkan Data MySQL dengan DataTables Server-side Processing (PHP, Bootstrap). DataTables Server-side processing adalah salah satu cara terbaik untuk menampilkan data sobat dari database yang jumlahkan sangat besar. Kalau sobat menggunakan DataTables yang biasa, hanya mengkonversi tabel ke DataTables seperti pada tutorial saya sebelumnya, akan sangat tidak efisien/lambat dalam menampilkan datanya karenya semua data akan di loaded dahulu sebelum di tampilkan. Nah, jika sobat menggunakan DataTables Server-side processing ini maka data sobat akan di load perhalaman, jadi tidak di load semua ya sob. Misal klik paging/halaman 10 maka akan di load data yang hanya pada halaman 10. Dengan begini web sobat akan terasa sangat ringan. walaupun dengan data yang sangat besar sekalipun.

Sebelum kita lanjut ke tutorialnya, sebaiknya sobat lihat dulu struktur folder dan file-file apa saja yang akan di buat nanti, silahkan lihat gambar di bawah ini:

struktur-folder-datatables-serverside

File yang akan di buat nanti hanya ada dua yaitu:

  • index.php
  • data.php

Untuk file-file yang sudah di sediakan oleh pihak bootstrap dan datatables. Jadi tinggal download aja. Nanti di halaman bawah akan di berikan link download untuk tutorial ini, jadi tidak usah repot-repot download dari bootstrap atau datatables lagi.

Langsung aja ya sob dimulai.

Database

Pertama tentu saja database, karena ini membutuhkan data yang sangat banyak, maka saya ambilkan aja database yang sudah ada yaitu database mysql, dan untuk table nya kita menggunakan table help_topic, dalam table ini sudah ada 500 data lebih, cukuplah untuk melihat perbedaan serversidenya.

Jadi untuk database sudah selesai 🙂

index.php

File pertama yang kita buat adalah index.php, file ini berisi kode HTML untuk menampilkan Table nya, dan juga sedikit Script Javascript dan AJAX untuk setting propertinya. Dan berikut ini kode di dalam file index.php

Sedikit penjelasan ya.

Baris 24 – 33 : Kode HTML Table yang sudah di berikan class table untuk penampilan responsive bootstrap.
Baris 25 – 32 : Kode HTML Table untuk header nya, ada 4 kolom header, untuk isi table tidak usah, sudah di handle oleh datatablesnya.
Baris 39 – 58 : Script untuk mengkonversi table HTML ke datatables Ajax
Baris 46 – 48 : null di situ adalah kolom yang akan di isikan data dari database (3 kolom)
Baris 49 – 54 : Membuat custom kolom dengan isi kolom adalah link untuk tombol edit
Baris 50 : Data untuk ID yang di masukkan dalam link edit, dalam hal ini di masukkan help_topic_id pada kolom 1, maka di tulis 0 karena aray dimulai angka 0

Saya rasa cukup, kita lanjut ke tahap selanjutnya

data.php

File selanjutnya ada data.php, file ini berisi banyak fungsi. Tapi hanya beberapa saja yang perlu di rubah. Script ini sudah built-in dari datatables nya, jadi tidak sudah dirubah semua. Apa saja yang perlu di rubah atau ditambahkan? nanti akan saya jelaskan. Sebelumnya di bawah ini adalah isi dari file data.php:

Isinya cukup banyak ya.. Tapi gak usah bingung sob, cuma beberapa saja kok dirubah, yuk simak berikut ini apa saja yang di perlukan.

Baris 3 : Masukkan kolom apa saja yang akan di tampilkan
Baris 6 : Masukkan kolom yang di jadikan primary key pada table database
Baris 9 : Masukkan nama table datatabase, dalam hal ini adalah help_topic
Baris 12 – 15 : Detail koneksi ke database (host , user, pass, database)

Oke, itu aja yang perlu dirubah, untuk kode-kode lainnya tidak perlu dirubah ya bagi yang gak paham 🙂

Nah dari kode-kode di atas akan di dapatkan tampilan seperti gambar di bawah ini

hasil-datatables-serverside

Jika di klik halaman 2, maka akan melakukan query lagi untuk menampilkan data pada halaman 2, dan seterusnya. Bisa di lihat pada gambar di bawah ini terlihat jika di klik halamannya, maka akan mucul processing menandakan halaman baru akan di load ketika halaman itu di klik/dibuka

proses-datatables-serverside

Cukup dulu tutorial untuk kali ini, yang bingung prakteknya bisa langsung download file lengkapnya di bawah ini. Jangan lupa di rate, like and share ya.. 🙂

Download:
Password:

About the author

Fatoni

Programming is my hobby, not my job.

40 Comments

Leave a Comment