Tutorial Codeigniter – Tutorial Cara Menggunakan Jquery DataTables di Codeigniter (Bagian Pertama)

May 16, 2018 / Diposting Oleh TondanoWeb.com / Codeigniter


Kali ini kita akan belajar menggunakan Jquery DataTables didalam Framework Codeigniter. Sebelum melangkah terlalu jauh kita harus mengetahui terlebih dahulu apa itu DataTables dan apa gunanya.

Plugin Jquery DataTables ini adalah salah satu dari banyak tool atau plugin yang berguna untuk menampilkan data yang bertipe statis maupun dinamis, biasanya untuk menampilkan data kita terlebih dahulu membuat tabel, pagination, form pencarian dan lain sebagainya apalagi jika data yang ingin ditampilkan ratusan sampai ribuan baris, jika semua data tersebut ditampilkan ke dalam browser yang pasti browser akan mengalami error bahkan bisa berpengaruh ke perangkat laptop/pc/mobile yang mengakses browser tersebut.

Akhirnya dengan munculnya plugin DataTables ini, maka untuk menampilkan data sedikit dipermudah, sudah tersedia fitur pagination, form pencarian serta fitur untuk melakukan sorting dan lain-lain sebagainya, serta data yang ditampilkan dibatasi kemudian bisa dilihat ketika diperlukan.

Dan pada saat ini, kita akan belajar bagaimana sih menghubungkan Plugin Jquery DataTables tersebut dengan Codeigniter, atau bagaimana cara menampilkan data yang ada di dalam database ke dalam Plugin DataTables ini.

 

Menyiapkan Database

Saat ini kita siapkan sample data untuk nantinya akan kita gunakan dalam tutorial ini. Buat sebuah database kemudian import data tabel dibawah ini ke dalam database yang sudah sobat buat.

 

Siapkan Framework Codeigniter

Kemudian siapkan framework codeigniter di dalam folder project yang sudah sobat siapkan. Di tutorial ini saya menaruh framework codeigniter di direktori /var/www/html/latihan/datatables.

Buka folder Application ⇒ config ⇒ file config.php dan cari baris kode $config[‘base_url’] kemudian tambahkan parameter URL menyesuaikan dengan letak atau tempat sobat menaruh proyek codeigniter, misalnya $config[‘base_url’] = ‘https://localhost/latihan/datatables/’; karena saya menaruh project ini di direktori /var/www/html/latihan/datatables.

Selanjutnya buka Application ⇒ config ⇒ file database.php dan atur konfigurasi database host, username, password, database menyesuaikan dengan settingan database milik sobat. Misalnya konfigurasi seperti ini, menyesuaikan dengan konfigurasi database yang saya gunakan.

 

Karena kita akan menggunakan database maka kita harus mengaktifkan atau meload terlebih dahulu librari dari database ini, caranya buka Application ⇒ config ⇒ file autoload.php cari baris kode $autoload[‘libraries’] = array(); kemudian isikan parameter database sehingga menjadi seperti ini $autoload[‘libraries’] = array(‘database’);

Di baris $autoload[‘helper’] = array(); tambahkan juga class librari URL sehingga menjadi seperti ini $autoload[‘helper’] = array(‘url’);

 

Plugin Datatables

Sebelum lanjut silahkan sobat persiapkan untuk Plugin dari Jquery DataTables ini, sobat bisa mendownloadnya disini https://datatables.net/download/ untuk tampilannya silahkan sobat sesuaikan dengan kebutuhan sobat nanti, selain bisa di download pengembang DataTables juga menyediakan link CDN jadi kita tidak perlu repot-repot mendownload plugin tersebut, tapi kita bisa langsung mengaksesnya menggunakan link CDN yang sudah disediakan.

Dan pada tutorial ini saya akan menggunakan plugin yang tersedia di CDN

https://cdn.datatables.net/1.10.16/css/jquery.dataTables.min.css

https://cdn.datatables.net/1.10.16/js/jquery.dataTables.min.js

 

Jangan lupa juga, kita harus menggunakan plugin javascript jquery

https://code.jquery.com/jquery-3.3.1.min.js

Controller

Buka folder Controller di dalam folder Application kemudian buat file dengan nama Datatables.php, kemudian pastekan script dibawah ini. Script Controller dibawah ini untuk memanggil View, dengan tujuan file tampil_datatables

 

Views

Buka folder View di dalam folder Application kemudian buat file dengan nama tampil_datatables.php dan pastekan script dibawah ini.

 

Untuk sementara kita akan mencoba menampilkan sample data statis di dalam DataTables ini, di dalam tag body pastekan script dibawah ini.

 

Sehingga menjadi seperti ini :

 

Kemudian tambahkan fungsi javascript untuk menjalankan plugin DataTables tersebut. Perhatikan di baris ketiga pada potongan script ini $(‘#example’) agar fungsi dari plugin tersebut berjalan kita harus memanggil id dari tabel diatas, dan nama id tabel diatas adalah example. Tambahkan potongan script ini di dalam tag HTML file tampil_datatables.php

 

Dan untuk keseluruhan dari script tampil_datatables.php seperti dibawah ini.

 

Coba sobat panggil url http://localhost/latihan/datatables/index.php/datatables  atau sesuai dengan konfigurasi dari sobat, lihat apa yang terjadi, jika tampilannya sudah seperti dibawah ini. Kita lanjut ke langkah selanjutnya untuk menampilkan data yang ada di database.

 

Bersambung, untuk bagian selanjutnya kita bahas disini https://tondanoweb.com/tutorial-codeigniter-tutorial-cara-menggunakan-jquery-datatables-di-codeigniter-bagian-kedua/.

Baca Juga :


Tags: , , , ,