Halooooooo sahabat harviacode.com…setelah kemarin kita membahas tentang menampilkan data dengan datatables, kali ini kita masih akan membahas tentang datatables, namun demikian kali ini kita akan menggunakan ajax source. Datatables juga mendukung menampilkan data dengan sumber berasal dari ajax. Dengan data dari ajax, load akan terasa lebih cepat dibandingkan dengan menampilkan secara biasa.

Untuk membuat ajax source datatables, berikut ini adalah langkah-langkahnya :
Step 1 : Anda perlu mendownload datatables, bootstrap, jquery dan images yang diperlukan. Anda bisa mendownload file-file tersebut di akhir artikel ini.
Step 2 : Saya asumsikan anda telah memiliki database dan sebuah tabel provinsi di dalamnya (anda juga bisa mendownloadnya di akhir artikel ini). Sekarang tinggal buat file index.php untuk menampilkan data dengan datatables. Berikut ini adalah kode untuk index.php.

Step 3 : Buatlah folder ajax dan file provinsi.php di dalamnya. Berikut ini adalah kode untuk propinsi.php dalam folder ajax.

 

Sedikit penjelasan :
a. Pada file index, kita membuat tabel dengan id provinsi. Dalam tabel tersebut hanya terdapat element thead, sementara tbody akan dikirim melalui ajax.

b. Masih di file index.php, kita memanggil fungsi datatable melalui javascript. Parameter yang kita kirim ada 3  :
ajax : merupakan alamat file ajax yaitu ‘ajax/provinsi.php’,
order : untuk mentukan urutan default tabel. Dalam hal ini kita mengirimkan urutan nomor index. Dalam contoh kita mengirimkan ‘1’, karena kita akan mengurutkan berdasarkan kolom kedua datatable yang kita buat yaitu nama provinsi. Jika anda ingin mengurutkan berdasarkan kolom pertama anda tinggal menggantinya dengan angka ‘0’.
columns : merupakan kolom yang ingin kita tampilkan. Jumlah column ini harus sesuai dengan urutan dan jumlah kolom pada elemen thead. Dalam column, kita bisa mengirimkan data (nama field), width (mengatur lebar) dan sClass (untuk menambahkan nama class pada elemen).

c. Selanjutnya, kita lihat di file ajax/provinsi.php. Dalam file ini kita mengambil data dari database dan menampilkannya dengan format JSON. JSON inilah yang dibaca oleh index.php dan ditampilkan dalam bentuk tabel.

Mudah bukan membuatnya.. hehe. Berikut ini adalah demo dan link download.

Demo | Download

Pada kesempatan berikutnya kita akan membahas tentang bagaimana menambahkan nomor urut dalam ajax source datatables. Semoga bermanfaat bagi sahabat harviacode.com. Terima kasih atas kunjungannya. Jangan lupa komentarnya ya 😀