Datatable adalah sebuah library berbasis Jquery yang dapat menampilkan data kedalam table dan mempunyai fitur Search, Order, paging dan lain-lain. Datatable juga dapat menampilkan data secara ajax dengan proses di server side. Tutorial kali ini saya akan membahasa cara menampilkan data secara Ajax server Side processing.
Disini saya akan membuat contoh Datatable Ajax dengan memakai Laravel.
Kenpa perlu menampilkan data secara Server Side, karena jika anda memiliki banyak data misalnya 1000rbuan++, maka jika anda mangambil semua data terlebih dahulu, kemudian di masukkan ke dalam tabel, maka proses aplikasi anda menjadi lambat, jika menggunakan server side, anda hanya mengambil data yang diperlukan saja, tidak harus menampilkan semua data, disertai dengan paging. Dan proses aplikasi anda akan cepat.
Silahkan download Sourcecodenya di bawah.
Intall Laravel
Step pertama yang akan kita lakukan adalah menginstall laravel, untuk menginstall laravel pastikan PC anda sudah terinstall Composer, jika belum menginstall composer, silahkan download disini.
Kemudian Buka CMD dan tentukan lokasi dan Ketikkan perintah :
composer create-project --prefer-dist laravel/laravel datatable_tutorialTambahkan Library Server Side
Setelah selesai melakukan instalasi laravel, silahkan buka laravel projek anda dengan memakai Netbean, PHPStorm, atau editor lainnya. ( disini saya memakai PHPStorm 
)
)
Kemudian download library yang sudah saya modifikasi di Github. Download sebagai Zip kemudian extrak dan buatkan folder server_side di Vendor (Projek Laravel). Dan copykan file ssp.php yang sudah anda download tadi dari Github.
Buat Controller
Jika anda memakai Laravel, anda diharuskan untuk membuat controller terlebih dahulu. Silahkan ketikkan perintah dibawah untuk membuat controller baru :
php artisan make:controller TableController
Setelah selesai membuat controller, tambahkan controller tersebut ke route.php.
by Membuat dan konfigurasi database
Jika anda belum memiliki database, kita akan membuat database terlebih dahulu. Jika sudah memilik database anda juga bisa langsung memakai database yang sudah dibuat.
Ubah file .env, kemudian ubah koneksi ke datatabase anda.
Seperti ini :
DB_CONNECTION=mysql
DB_HOST=127.0.0.1
DB_PORT=3306
DB_DATABASE=datatable_tutorial
DB_USERNAME=root
DB_PASSWORD=
setelah selesai merubah koneksi db ketikkan perintah :
php artisan migrateMenambahkan View, Model, Dan Controller
Disini kita akan menambahkan beberapa baris kode di view, model dan controller. Untuk projek kali ini saya akan coba memakai template gentelella yang di share oleh om Nuris Akbar di web belajarphp.net.
Silahkan download templatenya disini.
untuk cara menambahkan template ke laravel saya tidak bahas disini. Silahkan download projek laravel yang sudah saya integrasikan dengan template gentelella.
Pada View table tambahkan Ajax seperti dibawah ini:
Table di View :
<table id="datatable-responsive" class="table table-striped table-bordered dt-responsive nowrap" cellspacing="0" width="100%">
<thead>
<tr>
<th>User ID</th>
<th>First name</th>
<th>Last name</th>
<th>Gender</th>
<th>Email</th>
<th>Ip Address</th>
<th>Created date</th>
</tr>
</thead>
<tbody></tbody>
</table>
//Jquery:
$('#datatable-responsive').DataTable({
"processing": true,
"serverSide": true,
"ajax": {
url: "{{action('TableController@anyData')}}",
type: 'GET'
}
});Pada table controller anda akan melihat beberapa fungsi dan parameter untuk mengambil data secara Ajax :
// Table yang ingin di tampilkan
$table = ‘data_user tb’;
$table = ‘data_user tb’;
// Table’s primary key
$primaryKey = ‘tb.id’;
$primaryKey = ‘tb.id’;
$where = ”; // Jika anda ingin menambahkan kondisi, misalnya ‘ gender = ‘male’ ‘
$join =’ ‘; // jika anda memilik banyak table untuk join, misalnya ‘ join data_alamat al on al.user_id = tb.id ‘
//Untuk kolom yang ingin ditampilkan
//untuk table alias: array('db' => 'tb.id as user_id', 'dt' => 0),
$columns = array(
array('db' => 'tb.id as user_id', 'dt' => 0),
array('db' => 'tb.first_name', 'dt' => 1),
array('db' => 'tb.last_name', 'dt' => 2),
array('db' => 'tb.gender', 'dt' => 3),
array('db' => 'tb.email', 'dt' => 4),
array('db' => 'tb.ip_address', 'dt' => 5),
array('db' => 'tb.created_at', 'dt' => 6),
);
Dan setelah semuanya sudah anda masukkan, silahkan untuk dicoba di jalankan.
Jika sudah berhasil, maka anda akan melihat data keluar seperti video dibawah, bisa searching, Paging, Sorting, dll.
Sekian dari saya dan semoga bermanfaat.
Sekian dari saya dan semoga bermanfaat.
Download Full Sourcecode Laravel + Template Gentella
Silahkan tinggalkan pesan jika ada pertanyaan atau bisa bertanya disini.
Sumber : https://bisacoding.com/menampilkan-data-dengan-datatable-ajax-mysql/
