Cara menggunakan plugin table javascript

Apa itu JQuery DataTables ? serta Bagaimana Cara Menggunakan Plugin Tersebut pada CodeIgniter akan admin bahas kali ini. Pasti kalian sering mendengar jQuery bukan ? yups, DataTables adalah plugin yang disertakan oleh jQuery yang telah dilengkapi dengan fasilitas search. Dengan plugin ini, tentu developer tak perlu lagi untuk membuat kodingan search. Nah, selamat menyimak Tutorial Data Table pada CI berikut ini.

CodeIgniter

Apa itu JQuery DataTables serta Bagaimana Cara Menggunakan Plugin Tersebut pada CodeIgniter

Setelah beberapa waktu lalu admin membahas cara menginstall CodeIgniter dengan cepat serta cara mengaktifkan MySQLi di Xampp, kini admin akan mencoba mengulas penggunaan tabel pada CodeIgniter. Tabel merupakan representasi dua dimensi dari data, yang kerap digunakan programmer. Untuk membuat tabel itu sendiri, ada berbagai cara, diantaranya menggunakan bantuan plugin jQuery DataTables.

Cara Install jQuery DataTables di CodeIgniter

Untuk membuat CRUD pada CodeIgniter, tentu hal pertama yang dilakukan ialah membuat tabel terlebih dahulu. Untuk membuatnya, kamu dapat mengikuti langkah langkah pembuatan Data Tabel berikut ini:

1. Siapkan projek CodeIgniter, (misal : localhost/ayongoding).
2. Download Plugin jQuery DataTables.
3. Extract file hasil download.
4. Pindah ke folder projek (misal : C/Xampp/htdocs/ayongoding).
5. Buat file baru di folder controller.
6. Buat file baru di folder views.
7. Edit “Helper” pada autoload.php di folder config.

Langkah Langkah Install jQuery Data Table

1. Siapkan projek CodeIgniter

Langkah pertama, siapkan data projek CodeIgniter teman teman, misalkan admin menggunakan CI versi 3.1.8. Ohya, bagi yang belum bisa membuat dan menginstall codeigniter, dapat membaca artikel cara install CI yah.

Langkah pertama, Siapkan Projek CodeIgniter

2. Download Plugin jQuery DataTables

Langkah selanjutnya yaitu download plugin jQuery. Untuk mengunduh plugin tersebut, teman teman dapat menggunakan link berikut : Download jQuery DataTables. Pada kali ini, admin akan menggunakan versi terbaru saat artikel ini ditulis, yaitu versi 1.10.16.

Langkah Kedua, Download jQuery DataTables

3. Extract File Hasil Download

Setelah diunduh, extract filenya dahulu dulu yah.

4. Pindah Hasil Download ke Folder Projek

Setelah di ekstrak, silahkan pindah ke folder projek di folder codeigniter. Kali ini admin akan memindah ke dalam C/Xampp/htdocs/ayongoding. Sebenarnya, untuk merapikan data, kamu bisa membuat folder baru bernama “assets” di dalam folder ayongoding, kemudian memindahkan datatables ke dalam folder assets. Namun, kali ini admin tidak akan melakukan hal tersebut. Pada percobaan kali ini pula, admin hanya menggunakan, jquery.dataTables.css saja, sisanya bisa teman teman hapus. Namun, pada kali ini admin tidak akan menghapusnya.

Langkah Keempat, Pindah Hasil Download ke Folder Projek

5. Buat File Baru di Folder Controllers

Langkah berikutnya yaitu membuat file Data_table.php pada folder application/controllers. Untuk source codenya dapat di kopi paste berikut ini:

load->view('v_data_table');
  }
}
?>

Nantinya, saat user menuliskan localhost/Data_table, maka akan diarahkan ke folder view yang bernama v_data_table.

6. Buat File Baru di Folder Views

Setelah membuat file di controller, sekarang buatlah file v_data_table.php di applications/views untuk membuat tampilan pada user. Berikut source code yang dapat teman teman gunakan.

 
 
 
 
 
 


 


 

 

 

 
Rendering engine
 
Browser
 
Platform(s)
 
Engine version
 
CSS grade
 
 


 

 
Cahyo
 
Internet
 Explorer 4.0
 
 
Win 95+
 
 4
 
X
 
 

 
Aswin
 
Internet
 Google Chrome
 
 
Win 95+
 
5
 
C
 
 
 
 

7. Edit Helper pada Autoload.php

Langkah terakhir yaitu mengubah file pada application/config/autoload.php. Nah, yang diedit adalah bagian :

$autoload[‘helper’] = array();

Menjadi :

$autoload[‘helper’] = array(‘url’);

Setelah melakukan seluruh step by step diatas, coba bukalah :

http://localhost/ayongoding/index.php/data_table

Hasilnya seharusnya seperti gambar berikut ini:

Hasil Tabel setelah Menggunakan jQuery DataTables

Pada gambar tersebut, dapat kita simpulkan bahwa ketika kita menggunakan plugin jQuery DataTables pada CodeIgniter. Selain dapat membuat tabel, kita juga sudah bisa menggunakan fitur search serta fitur show entry.