Bismillaahirrohmaanirrohiim…
Barangkali ada yang suka menggunakan datatable untuk menampilkan table dengan bootstrap, javascript / jquery.
Berikut ini saya tulis beberapa kode / fungsi yang sering dipakai saat menggunakan datatable.
CSS dan JS yang diperlukan:
<!-- Latest compiled and minified CSS --> <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous"> <!-- Latest compiled and minified JavaScript --> <script src="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script> <link rel="stylesheet" href="https://cdn.datatables.net/1.12.1/css/dataTables.bootstrap.min.css" crossorigin="anonymous" referrerpolicy="no-referrer" /> <link rel="stylesheet" href="https://cdn.datatables.net/buttons/2.2.3/css/buttons.bootstrap.min.css" crossorigin="anonymous" referrerpolicy="no-referrer" />
Plugin lainnya:
<script src="https://cdn.datatables.net/1.12.1/js/jquery.dataTables.min.js"></script> <script src="https://cdn.datatables.net/1.12.1/js/dataTables.bootstrap.min.js"></script> <script src="https://cdn.datatables.net/buttons/2.2.3/js/dataTables.buttons.min.js"></script> <script src="https://cdn.datatables.net/buttons/2.2.3/js/buttons.bootstrap.min.js"></script> <script src="https://cdn.datatables.net/buttons/2.2.3/js/buttons.html5.min.js"></script> <script src="https://cdn.datatables.net/buttons/2.2.3/js/buttons.print.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/jszip/3.1.3/jszip.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/pdfmake/0.1.53/pdfmake.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/pdfmake/0.1.53/vfs_fonts.js"></script>
Kode untuk mengaktifkan table yang akan diformat sebagai datatable:
$(".tabledata").DataTable({ paging: false, info: false, searching: false, order: [], dom: "Bfrtip", buttons: [ { extend: "excel", exportOptions: { columns: [":not(.notexport)"],//kecuali th dengan class notexport title: 'Data export',//nama file messageTop: 'Teks di atas', messageBottom: 'Teks di bawah', format: { body: function(data, column, row) { if (typeof data === 'string' || data instanceof String) { data = data.replace(/<(?!br\s*\/?)[^>]+>/g, '');//menghapus tags html kecuali br data = data.replace(/<br\s*\/?>/ig, "\r\n");//mengganti br dengan \r\n } return data; } } } }, { extend: "pdf", exportOptions: { columns: ":not(.notexport)" } }, { extend: "print", exportOptions: { columns: [":not(.notexport)"] } }, ], });
Inisiasi datatable dari konten yang diambil dengan ajax:
$.ajax({ type: "POST", data: "act=edit&did="+did+"&ke="+ke, url: "url", success:function(data) { $("#id_list_data").html(data); var dttbl = $("#datatable").DataTable({ "paging": false, "ordering": false, "oSearch": { "bSmart": false, "bRegex": true } //searching valid meski dalam kurung }); }, beforeSend: function(e) { $("#id_list_data").html("Please wait..."); }, complete: function(e) { }, error: function(e, s, a) { $("#id_list_data").html(\'Gagal saat load data, <a href="javascript:;" >Disable auto sorting pada kolom 1
"order": [] //disable semua kolom "ordering": falseSort by nilai td
<td data-sort="37">2/1/78 (37 years old)</td>Export kolom tertentu meskipun di hidden
$(document).ready(function() { $('#example').DataTable( { dom: 'Bfrtip', buttons: [ { extend: 'excel', exportOptions: { columns: [ 0, ':visible' ] } }, { extend: 'pdf', exportOptions: { columns: ':visible' } }, { extend: 'print', exportOptions: { columns: [ 0, 1, 2, 5 ] } }, 'colvis' ] } ); } );Set atau clear form search pada datatable
$("#datatable").DataTable().search("").columns().search("").draw(); jika gagal pakai di bawah ini $("#datatable").DataTable().search("katakunci").draw();Mengurutkan kolom tertentu dan menonaktifkan sort pada kolom lainnya
columnDefs: [{ orderable: false, targets: [0,1,3,4,5,7,8] },{ visible: true, targets: 5, ordering:true }], //parameter orderable dan ordering sepertinya sama karena diubah tidak ada bedanya. //namun jika utk menonaktifkan semua kolom, pake ordering: false, //visible digunakan utk men show hide kolomMenambahkan toolbar dan grouping tr – membuat banyak header pada tr
var kolomgroup = 6;//kolom yg digrouping var colspangroup = 9;//jumlah kolom yg tampil $("#datatable").DataTable({ paging: false, info: false, columnDefs: [{ orderable: false, targets: [0,1,3,4,5,7,8] },{ visible: true, targets: kolomgroup, ordering:true }], order: [[kolomgroup, "asc"]], drawCallback: function (settings) { var api = this.api(); var rows = api.rows({ page: "current" }).nodes(); var last = null; api .column(kolomgroup, { page: "current" }) .data() .each(function (group, i) { if (last !== group) { $(rows) .eq(i) .before('<tr class="group bgtrhead"><td colspan="'+colspangroup+'"><b>Tujuan: ' + group + '</b></td></tr>'); last = group; } }); }, "dom": '<"toolbar">lfrtip' }); $("div.toolbar").html('<div class="pull-left"><a href="javascript:;" >Paging true, info false tapi ingin set jumlah baris
paging: true, pageLength: 100, info: false, //bisa pake length menu, jika info true dan tampil pilihan jumlah baris pada table "lengthMenu": [10, 50, 100, 500],Set orientation landscape pada button
orientation: 'landscape',
Bismillaahirrohmaanirrohiim... Berikut ini source code yang dapat dimodifikasi untuk membuat front end website sekolah dengan…
Bismillaahirrohmaanirrohiim... Jika domain dan sub domainnya berada dalam satu vps cyberpanel, maka seringkali jadi tidak…
Bismillaahirrohmaanirrohiim... Dalam era digital saat ini, penggunaan aplikasi kasir (Point of Sale/POS) menjadi solusi penting…
Bismillaahirrohmaanirrohiim... Saat browsing-browsing saya seringkali melihat iklan aapanel, sekilas membuat penasaran sampai akhirnya saya mencoba…
Bismillaahirrohmaanirrohiim... Berikut ini perintah untuk reset password admin cyberpanel melalui SSH command line. pastikan login…
Bismillaahirrohmaanirrohiim... Berikut ini beberapa template blogspot yang dapat anda gunakan secara gratis namun tampilannya bagus.…