Datatables adalah plugin jquery yang digunakan untuk menampilkan data dalam bentuk table dengan tambahan fitur-fitur lain yang sudah terintegrasi. Data yang ditampilkan tersebut sudah terintegrasi dengan fitur search, pagination, dan sorting secara default. Hal ini tentu saja jauh lebih cepat dan mudah daripada harus membuat fitur tersebut satu per satu secara manual. Untuk Framework Laravel 5.5 ini sendiri sudah disediakan package untuk menggunakan datatable ini yaitu dengan menginstall Laravel Datatables.
1.) Install package yajra/laravel-datatables
Jalankan perintah berikut pada direktori program Laravel anda.
composer require yajra/laravel-datatables-oracle
Nantinya akan muncul proses penginstalan seperti gambar di bawah ini. Tunggulah proses tersebut sampai selesai.
 |
| Composer Install |
'providers' => [
...,
Yajra\DataTables\DataTablesServiceProvider::class,
]
'aliases' => [
...,
'DataTables' => Yajra\DataTables\Facades\DataTables::class,
]
Tambahkan kode providers pada bagian providers dan aliases pada bagian aliases.
2.) Cara Menggunakan Datatables
Pada tutorial ini saya akan menggunakan contoh datatables pada program-program yang pernah saya buat sebelumnya yaitu ODWINCMS, ODWINStok dan ODWIN Multi. Ketiga program tersebut tersedia semuanya pada artikel lain dalam blog ini.
Yang pertama buatlah view yang mengandung table, dalam contoh ini saya akan menggunakan modul Module.
Yang pertama buatlah view yang mengandung table, dalam contoh ini saya akan menggunakan modul Module.
<table class="table table-striped table-hover table-bordered dt-responsive nowrap dataTable" cellspacing="0" width="100%">
<thead>
<tr>
<th>ID</th>
<th>Name</th>
<th>Slug</th>
<th>Status</th>
<th>Actions</th>
</tr>
</thead>
</table>
Untuk field-field yang dibutuhkan silahkan disesuaikan dengan kebutuhan tabel yang anda gunakan nantinya. Dalam contoh kode di atas saya menggunakan class dataTable yang nantinya akan saya gunakan dalam script jquery.
Langkah selanjutnya adalah membuat script jquery untuk mengubah tampilan tabel tersebut menjadi datatables. Contoh kode nya adalah seperti berikut ini
<script>
$('.dataTable').dataTable({
processing: false,
serverSide: true,
ajax: "<?=url('backend/datatable/module');?>",
columns: [
{data: 'id', name: 'id'},
{data: 'name', name: 'name'},
{data: 'slug', name: 'slug'},
{data: 'active', render: function ( data, type, row ) {
var text = "";
var label = "";
if (data == 1){
text = "Active";
label = "success";
} else
if (data == 2){
text = "Deactive";
label = "warning";
}
return "<span class='badge badge-" + label + "'>"+ text + "</span>";
}},
{data: 'action', name: 'action', orderable: false, searchable: false}
],
responsive: true
});
</script>
Keterangan :
- serverSide diisi true agar data yang digunakan mengakses ke server
- ajax diisi dengan url yang berfungsi untuk menyediakan data
- columns diisi dengan data-data yang akan ditampilkan pada tabel tersebut. Data pada columns ini dapat dimanipulasi dahulu sebelum ditampilkan seperti data active pada contoh di atas
- orderable : false digunakan jika anda ingin kolom tersbebut tidak dapat disorting
- searchable : false digunakan jika anda ingin kolom tersebut tidap dapat disearch.
Dalam contoh kode di atas, kolom action saya buat agar tidak dapat di search dan di sorting karena kolom tersebut berisi data button-button action seperti view, update, dan delete dalam program yang saya buat.
Setelah data-data pada view sudah disiapkan sekarang yang diperlukan adalah membuat isi dari action yang terdapat pada url ajax tadi.
public function datatable() {
$data = Module::where('active', '!=', 0);
return Datatables::of($data)
->addColumn('action', function ($data) {
$url_edit = url('backend/modules/'.$data->id.'/edit');
$url = url('backend/modules/'.$data->id);
return "<a class='btn-action btn btn-primary btn-view' href='".$url."' title='View'><i class='fa fa-eye'></i></a> <a class='btn-action btn btn-info' href='".$url_edit."' title='Edit'><i class='fa fa-edit'></i></a> <button data-url='".$url."' onclick='deleteData(this)' class='btn-action btn btn-danger' title='Delete'><i class='fa fa-trash-o'></i></button>";
})
->rawColumns(['action'])
->make(true);
}
Isi dari action tersebut pertama adalah mengambil data dari database sesuai dengan tabel yang ingin ditampilkan. Yang perlu diingat disini adalah anda tidak perlu menggunakan perintah ->get() seperti cara umunya. Dalam contoh di atas saya menambahkan kolom action yang berisi html button-button action seperti yang saya jelaskan sebelumnya. Perintah rawColumns digunakan untuk membuat kolom-kolom yang anda daftarkan pada perintah tersebut ditampilkan apa adanya. Data pada kolom-kolom yang tidak terdaftar pada rawColumns ini akan mengalami proses escape terlebih dahulu.
Dan yang terakhir jika template HTML yang anda gunakan tidak memiliki halaman datatable maka jangan lupa untuk menambahkan CSS dan Javascript datatables ini dahulu seperti kode di bawah ini.
<!-- Bootstrap CSS -->
<link href="//netdna.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css" rel="stylesheet">
<link rel="stylesheet" href="//cdn.datatables.net/1.10.7/css/jquery.dataTables.min.css">
<!-- jQuery -->
<script src="//code.jquery.com/jquery.js"></script>
<!-- DataTables -->
<script src="//cdn.datatables.net/1.10.7/js/jquery.dataTables.min.js"></script>
<!-- Bootstrap JavaScript -->
<script src="//netdna.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
Urutan langkah-langkah di atas tidak mengikat sepenuhnya, anda bisa membuat action nya terlebih dahulu baru membuat viewnya sesuaikan dengan kenyamanan pola anda. Untuk menggunakan datatables pada Laravel ini sebaiknya anda jangan menggunakan php artisan serve dalam mengakses url program anda. Perintah tersebut dapat membuat datatable ini mengalami error dalam menampilkan datanya.
Demikianlah artikel Tutorial Laravel 5.5 - Datatables ini. Semoga penjelasan-penjelasan pada tutorial ini dapat dipahami dan selamat mencoba.
Post a Comment
Post a Comment