Halo sobat netizen kali ini saya akan sharing cara membuat Tombol Export (Copy, PDF,CSV,PRINT) dan Input Text untuk Search tersendiri pada datatables, Apa sih Datatables itu ? Datatables adalah sebuah Plugin untuk Jquery Javascript Library yang memudahkan kita dalam mengolah database, Singkatnya Datatables hampir sama dengan Bootstrap yang berisikan Library untuk memudahkan kita dalam pembuatan aplikasi berbasis Web dan database. nah pada kesempatan kali ini yang saya maksudkan dalam membuat tombol Export dan Search Tersendiri ini adalah seperti contoh di bawah ini.
Nah gambar di atas adalah contoh aplikasi Pengaduan yang saya buat. Jadi yang saya maksud adalah tombol Export di tengah yang berisikan (Copy, PDF, Excel, Print) untuk CSVnya tidak saya tambahkan namun kalau sobat ingin menambahkan cukup modifikasi sedikit kode yang akan saya berikan. Oke kita lanjut yang pertama kali sobat harus lakukan adalah memasukan Kode di bawah ini sebelum tag penutup </head>
<!-- Bootstrap CSS --> <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous"> <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.12.2/css/bootstrap-select.min.css"> <script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.12.2/js/bootstrap-select.min.js"></script> <script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script> <link rel="stylesheet" href="http://code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css"> <!-- Data Tables CSS --> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script> <link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/v/bs4/jszip-2.5.0/dt-1.10.20/b-1.6.1/b-flash-1.6.1/b-html5-1.6.1/b-print-1.6.1/fc-3.3.0/r-2.2.3/datatables.min.css"/> <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/pdfmake/0.1.36/pdfmake.min.js"></script> <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/pdfmake/0.1.36/vfs_fonts.js"></script> <script type="text/javascript" src="https://cdn.datatables.net/v/bs4/jszip-2.5.0/dt-1.10.20/b-1.6.1/b-flash-1.6.1/b-html5-1.6.1/b-print-1.6.1/fc-3.3.0/r-2.2.3/datatables.min.js"> </script> <!-- Jquery UI --> <script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script> <link rel="stylesheet" href="http://code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css">
Nah setelah memasukan kode di atas sekarang sobat harus membuat Input Text sebagai dasar kita untuk melakukan Pencarian, Kodenya seperti gambar di bawah ini
<input type="text" name="from_date" id="from_date" class="form-control" autocomplete="off" placeholder="Dari Tanggal" />
<br/>
<input type="text" name="to_date" id="to_date" class="form-control" autocomplete="off" placeholder="Sampai Tanggal" />
<br/>
<input type="text" name="perkara" id="perkara" class="form-control" autocomplete="off" placeholder="Perkara" />
<br/>
<input type="text" name="regu" id="regu" class="form-control" autocomplete="off" placeholder="Regu" />
Oke setelah kita memiliki Input Text Box untuk mencari data sekarang sobat perlu membuat sebuah table dengan id Meja dan tentunya table tersebut sudah sobat setting agar melakukan load data dari Database sobat, untuk load data tersebut tidak saya jelaskan di tutorial ini. Sekarang sobat perlu menambahkan kode di bawah untuk table sobat
<div class="container-fluid">
<class="table-responsive">
<table id="meja" class = "table table-bordered table-hover" name="dataTable">
<thead>
<tr>
<th></th>
<---- Isi dengan Data Sobat ---->
</tr>
</thead>
<tbody>
<tr>
<td></td>
<---- Isi dengan Data Sobat ---->
</tr>
</tbody>
</table>
nah setelah sobat mempunyai table dengan ID meja serta sobat sudah berhasil melakukan load database sobat masukan kode di bawah ini sebelum tag menutup </head>
<script type="">
$(document).ready(function () {
$.fn.dataTable.ext.search.push(
function (settings, data, dataIndex) {
var min = $('#from_date').datepicker('getDate');
var max = $('#to_date').datepicker('getDate');
var startDate = new Date(data[5]);
if (min == null && max == null) return true;
if (min == null && startDate <= max) return true;
if (max == null && startDate >= min) return true;
if (startDate <= max && startDate >= min) return true;
return false;
}
);
$('#from_date').datepicker({ onSelect: function () { table.draw(); }, changeMonth: true, changeYear: true });
$('#to_date').datepicker({ onSelect: function () { table.draw(); }, changeMonth: true, changeYear: true });
var table = $('#meja').DataTable({
"columnDefs": [ {
"searchable": false,
"orderable": false,
"targets": 0
} ],
"order": [[ 0, 'asc' ]],
dom:
"<'row'<'col-sm-3'l><'col-sm-6 text-center'B><'col-sm-3'f>>" +
"<'row'<'col-sm-12'tr>>" +
"<'row'<'col-sm-5'i><'col-sm-7'p>>",
buttons: [
{
extend: 'copy',
orientation: 'landscape',
pageSize: 'LEGAL',
download : "open",
title : 'REKAP DATA PENGADUAN',
exportOptions:
{
columns: [0, 1, 2, 3, 4, 5, 6, 7, 8]
}
},
{
extend: 'pdfHtml5',
orientation: 'landscape',
pageSize: 'LEGAL',
download : "open",
title : 'REKAP DATA PENGADUAN',
exportOptions:
{
columns: [0, 1, 2, 3, 4, 5, 6, 7, 8]
}
},
{
extend: 'excel',
orientation: 'landscape',
pageSize: 'LEGAL',
download : "open",
title : 'REKAP DATA PENGADUAN',
exportOptions:
{
columns: [0, 1, 2, 3, 4, 5, 6, 7, 8]
}
},
{
extend: 'print',
orientation: 'landscape',
pageSize: 'LEGAL',
download : "open",
title : 'REKAP DATA PENGADUAN',
exportOptions:
{
columns: [0, 1, 2, 3, 4, 5, 6, 7, 8]
}
}
]
});
$('#perkara').keyup(function(){
table.columns(2).search($(this).val()).draw() ;
});
$('#regu').keyup(function(){
table.columns(8).search($(this).val()).draw() ;
});
// Event listener to the two range filtering inputs to redraw on input
$('#from_date, #to_date').change(function () {
table.draw();
});
table.on( 'order.dt search.dt', function () {
table.column(0, {search:'applied', order:'applied'}).nodes().each( function (cell, i) {
cell.innerHTML = i+1;
} );
} ).draw();
} );
</script>
Perhatikan kode di atas pada bagian ini
var startDate = new Date(data[5]);
nah kalau sobat hendak melakukan pencarian dari tanggal sekian sampai tanggal sekian maka sobat ganti data[kolom tanggal referensi] dengan kolom mana yang sobat pakai untuk menjadi acuan tanggal pencarian, oiya kalau sobat hendak menambahkan Export CSV sobat tinggal copy paste kode
{
extend: 'CSV',
orientation: 'landscape',
pageSize: 'LEGAL',
download : "open",
title : 'REKAP DATA PENGADUAN',
exportOptions:
{
columns: [0, 1, 2, 3, 4, 5, 6, 7, 8]
}
}
pada bagian columns adalah kolom mana saja yang hendak di Export jadi sobat bisa melakukan pengecualian dengan menghilangkan kolom tertentu, sisanya sobat analisa sendiri ya 😀
Nah mungkin sekian dulu yang bisa saya bagikan terkait penggunaan datatables, plugin ini sangat membantu sekali dalam pengolahan data sehingga kita tidak perlu membuat export manual, Apabila ada pertanyaan sobat bisa corat – coret pada kolom komentar dan Salam Mr Leong.
Untuk coontroler dan modelnya gmn..
tidak ada controller dan model gan itu php native