Kembali lagi di tutorial Membuat Aplikasi Mini Market Dengan ExpressJS Dan Mongoose. Silahkan kalian baca tutorial sebelumnya untuk mengikuti ke tahap ini, pada pembahasan sebelumnya kita sudah membuat CRUD Merk.
Pada tutorial kali ini kita akan memasang library/plugin DataTables, adapun pengertiannya adalah salah satu plugin jquery yang digunakan untuk menampilkan data dalam bentuk grid, selain menampilkan data, library ini juga akan otomatis menampilkan fitur lain yang sering digunakan seperti pencarian data, sorting data dan paging untuk menampilkan data dengan jumlah tertentu pada setiap halaman. sedangkan datatables serverside adalah sebuah konsep yang menginjek data json dalam dokument HTML sehingga proses menampilkan data menjadi lebih cepat. Intinya dalam tabel kita tidak harus membuat fungsi search dan pagination lagi jadi sudah ada di plugin datatables ini.
Kita mulai pembahasan kali ini dengan membuka derektori mini_market di text editor favorit kalian.
Pertama edit file page.ejs yang ada dalam views/layout/ seperti dibawah ini
<!DOCTYPE html>
<html>
<head>
<title><%=blocks.title%></title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<link href="/stylesheets/style.css" rel="stylesheet"></link>
<link href="/bootstrap/css/bootstrap.min.css" rel="stylesheet"></link>
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.5.0/css/all.css" integrity="sha384 B4dIYHKNBt8Bc12p+WXckhzcICo0wtJAoU8YZTY5qE0Id1GSseTk6S+L3BlXeVIU" crossorigin="anonymous">
<link href="https://cdn.datatables.net/1.10.20/css/dataTables.bootstrap4.min.css" rel="stylesheet"></link>
</head>
<body>
<header>
<%-blocks.header%>
</header>
<div class="container-fluid">
<%-partial('../partials/navigasi')%>
<h1>
<%=blocks.title%></h1>
<%-body -%>
</div>
<footer>
<%-blocks.footer%>
</footer>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.0/jquery.min.js"></script>
<script src="/bootstrap/js/bootstrap.min.js" ></script>
<script src="https://cdn.datatables.net/1.10.20/js/jquery.dataTables.min.js" ></script>
<script src="https://cdn.datatables.net/1.10.20/js/dataTables.bootstrap4.min.js"></script>
<script>
$(document).ready(function(){
$('#tabel_kategori').DataTable();
$('#tabel_satuan').DataTable();
$('#tabel_merk').DataTable();
});
</script>
</body>
</html>
Setelah itu kita edit lagi file index.ejs di dalam folder views/umum/ untuk menampilkan datatable, lihat script dibawah.
<% layout('../layout/page') -%>
<% block('title', title) %>
<hr>
<div class=row>
<div class='col-md-4'>
<h4 align='center'>Kategori</h4><a href='/umum/kategori/add'><button class='btn btn-primary'>Tambah</button></a>
<br>
<br>
<table class='table' id='tabel_kategori'>
<thead>
<tr>
<th>#</th>
<th>Nama Kategori</th>
<th>Action</th>
</tr>
</thead>
<tbody>
<% var no = 1; for(var i = 0; i < kategori.length; i++){ %>
<tr>
<th scope='row'><%= no++ %></th>
<td><%= kategori[i].nama %></td>
<td><a href='/umum/kategori/edit/<%= kategori[i]._id %>'><i class='far fa-edit'></i></a> <a href='umum/kategori/delete/<%= kategori[i]._id %>' onclick='return confirm("Apa kamu yakin akan menghapus data ini?")'><i class='fas fa-trash'></i></a> </td>
</tr>
<% } %>
</tbody>
</table>
</div>
<div class='col-md-4'>
<h4 align='center'>Satuan</h4><a href='/umum/satuan/add'><button class='btn btn-primary'>Tambah</button></a>
<br>
<br>
<table class='table' id='tabel_satuan' >
<thead>
<tr>
<th>#</th>
<th>Nama Satuan</th>
<th>Action</th>
</tr>
</thead>
<tbody>
<% var no = 1; for(var i = 0; i < satuan.length; i++){ %>
<tr>
<th scope='row'><%= no++ %></th>
<td><%= satuan[i].nama %></td>
<td><a href='/umum/satuan/edit/<%= satuan[i]._id %>'><i class='far fa-edit'></i></a> <a href='umum/satuan/delete/<%= satuan[i]._id %>' onclick='return confirm("Apa kamu yakin akan menghapus data ini?")'><i class='fas fa-trash'></i></a> </td>
</tr>
<% } %>
</tbody>
</table>
</div>
<div class='col-md-4'>
<h4 align='center'>Merk</h4><a href='/umum/merk/add'><button class='btn btn-primary'>Tambah</button></a>
<br>
<br>
<table class='table' id='tabel_merk'>
<thead>
<tr>
<th>#</th>
<th>Nama Merk</th>
<th>Action</th>
</tr>
</thead>
<tbody>
<% var no = 1; for(var i = 0; i < merk.length; i++){ %>
<tr>
<th scope='row'><%= no++ %></th>
<td><%= merk[i].nama %></td>
<td><a href='/umum/merk/edit/<%= merk[i]._id %>'><i class='far fa-edit'></i></a> <a href='umum/merk/delete/<%= merk[i]._id %>' onclick='return confirm("Apa kamu yakin akan menghapus data ini?")'><i class='fas fa-trash'></i></a> </td>
</tr>
<% } %>
</tbody>
</table>
</div>
</div>
Selanjutnya coba kalian jalankan "npm start" dan akses "localhost:3000" di browser favorit kalian. Maka akan ada tampilan seperti dibawah.
