Cara Membuat Custom Filter DataTables Dengan Codeigniter
Cara Membuat Custom Filter DataTables Dengan Codeigniter, Halo guys, pada kesempatan kali ini saya akan berbagi sedikit tutorial bagaimana cara membuat custom filter pada plugin datatable. Fitur filter pada DataTable secara default hanya mengunakan kolam pencarian yang sudah terpasang langsung dengan table secara otomatis ketika kita menginisialisasikan plugin DataTable pada tabel kita.
Dengan adanya plugin DataTable, kita dapat membuat tabel data dengan fitur yang super canggih seperti pagination data, Filter, Search, Ajax, Dll. tanpa ribet membuatnya dari awal.
Namun jika dirasa fitur tersebut masih kurang, kita juga dapat membuat filter data sendiri sesuai keinginan kita.
Pada tutorial kali ini saya memberikan contoh penggunaan custom filter pada DataTable menggunakan Framework CodeIgniter versi 3.
Baiklah berikut langkah-langkahnya :
Cara Membuat Custom Filter DataTables Dengan Codeigniter
Hal pertama yang perlu kamu siapkan adalah sebuah database yang dusah berisikan sekumpulan data yang nantinya akan kamu tampilkan dalam bentuk tabel.
Kedua, pastikan kamu sudah menginstall DataTable pada folder projekmu.
Jika sudah, kamu bisa langsung membuat Filter data yang ingin kamu gunakan nanti untuk memfilter data pada tablemu.
Persiapan :
Contoh Studi Kasus Custom Filter :
Disini saya akan membuat custom filter untuk menampilkan data customer berdasarkan jenis kelamin. Jika kita memilih jenis kelamin laki-laki maka data yang muncul adalah customer yang memiliki jenis kelamin laki-laki, begitupula sebaliknya.
Pada contoh kali ini saya menggunakan data JSON yang bisa kamu download disini :
Kemudian nanti simpan file tersebut di folder asset projek kamu.
Baca Juga :
- Membuat Pencarian Data Menggunakan Codeigniter 3 Lengkap
- Cara Membuat Kode Unik Otomatis di Codeigniter 3
Lansung saja peraktikan ya, pertama kamu buat View untuk menampilkan data. Berikut adalah contoh struktur HTMLnya .
ViewData.php :
<!DOCTYPE html>
<html>
<head>
<title>Demo</title>
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.5.2/css/bootstrap.css">
<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/1.10.22/css/dataTables.bootstrap4.min.css">
</head>
<body>
<div class="container">
<div class="row" style="margin-top: 50px;">
<div class="col-md-12">
<div class="row">
<div class="col-md-2">
<div class="form-group">
<label>Pilih Jenis Kelamin</label>
<select class="form-control jenis_kelamin" name="">
<option>-- Pilih --</option>
<option value="laki-laki">Laki-Laki</option>
<option value="perempuan">Perempuan</option>
</select>
</div>
</div>
</div>
</div>
<div class="col-md-12">
<table id="tabelData" class="table table-striped table-bordered" style="width:100%">
<thead>
<tr>
<th>Nama Depan</th>
<th>Nama Belakang</th>
<th>Email</th>
<th>Jenis Kelamin</th>
<th>Tanggal Register</th>
</tr>
</thead>
<tbody>
<?php foreach ($list_data as $row) { ?>
<tr>
<td><?= $row->first_name ?></td>
<td><?= $row->last_name ?></td>
<td><?= $row->email ?></td>
<td><?= $row->gender ?></td>
<td><?= $row->register_date ?></td>
</tr>
<?php } ?>
</tbody>
<tfoot>
<tr>
<th>Nama Depan</th>
<th>Nama Belakang</th>
<th>Email</th>
<th>Jenis Kelamin</th>
<th>Tanggal Register</th>
</tr>
</tfoot>
</table>
</div>
</div>
</div>
<script src="https://code.jquery.com/jquery-3.5.1.js"></script>
<script src="https://cdn.datatables.net/1.10.22/js/jquery.dataTables.min.js"></script>
<script src="https://cdn.datatables.net/1.10.22/js/dataTables.bootstrap4.min.js"></script>
</body>
</html>
Setelah itu dibagian Controller buat kode seperti berikut :
<?php
defined('BASEPATH') OR exit('No direct script access allowed');
class ViewController extends CI_Controller {
public function index()
{
$json = file_get_contents("./assets/MOCK_DATA.json");
$obj = json_decode($json);
$data = array(
'list_data' => $obj
);
$this->load->view('ViewData',$data);
}
}
Ingat, untuk di bagian file_get_contents() kamu mengisi lokasi file data JSON yang telah didownload tadi.
Langkah terakhit tingal tambahkan Script JS dibawah ini pada bagian bawah struktur HTML.
<script type="text/javascript">
$(document).ready(function() {
$('#tabelData').DataTable();
function filterData () {
$('#tabelData').DataTable().search(
$('.jenis_kelamin').val()
).draw();
}
$('.jenis_kelamin').on('change', function () {
filterData();
});
});
</script>Kemudian kamu simpan dan coba akses di browser kamu.
Maka hasil dari kode diatas akan seperti dibawah ini :
Selamat mencoba.
