111 lines
4.0 KiB
JavaScript
111 lines
4.0 KiB
JavaScript
|
|
$(document).ready(function()
|
|
{
|
|
|
|
// initialize datatable
|
|
$('#dt-basic-tujuan').dataTable(
|
|
{
|
|
responsive: true,
|
|
lengthChange: false,
|
|
dom:
|
|
/* --- Layout Structure
|
|
--- Options
|
|
l - length changing input control
|
|
f - filtering input
|
|
t - The table!
|
|
i - Table information summary
|
|
p - pagination control
|
|
r - processing display element
|
|
B - buttons
|
|
R - ColReorder
|
|
S - Select
|
|
|
|
--- Markup
|
|
< and > - div element
|
|
<"class" and > - div with a class
|
|
<"#id" and > - div with an ID
|
|
<"#id.class" and > - div with an ID and a class
|
|
|
|
--- Further reading
|
|
https://datatables.net/reference/option/dom
|
|
--------------------------------------
|
|
*/
|
|
"<'row mb-3'<'col-sm-12 col-md-6 d-flex align-items-center justify-content-start'f>>" +
|
|
"<'row'<'col-sm-12'tr>>" +
|
|
"<'row'<'col-sm-12 col-md-5'i><'col-sm-12 col-md-7'p>>",
|
|
buttons: [
|
|
{
|
|
extend: 'colvis',
|
|
text: 'Column Visibility',
|
|
titleAttr: 'Col visibility',
|
|
className: 'btn-outline-default'
|
|
},
|
|
{
|
|
extend: 'pdfHtml5',
|
|
text: 'PDF',
|
|
titleAttr: 'Generate PDF',
|
|
className: 'btn-outline-default'
|
|
},
|
|
{
|
|
extend: 'excelHtml5',
|
|
text: 'Excel',
|
|
titleAttr: 'Generate Excel',
|
|
className: 'btn-outline-default'
|
|
},
|
|
{
|
|
extend: 'csvHtml5',
|
|
text: 'CSV',
|
|
titleAttr: 'Generate CSV',
|
|
className: 'btn-outline-default'
|
|
},
|
|
{
|
|
extend: 'copyHtml5',
|
|
text: 'Copy',
|
|
titleAttr: 'Copy to clipboard',
|
|
className: 'btn-outline-default'
|
|
},
|
|
{
|
|
extend: 'print',
|
|
text: 'Print',
|
|
titleAttr: 'Print Table',
|
|
className: 'btn-outline-default'
|
|
}
|
|
],
|
|
columnDefs: [
|
|
{
|
|
// targets: -1,
|
|
title: 'Action',
|
|
orderable: false,
|
|
render: function(data, type, full, meta)
|
|
{
|
|
|
|
/*
|
|
-- ES6
|
|
-- convert using https://babeljs.io online transpiler
|
|
return `
|
|
<a href='javascript:void(0);' class='btn btn-sm btn-icon btn-outline-danger rounded-circle mr-1' title='Delete Record'>
|
|
<i class="fal fa-times"></i>
|
|
</a>
|
|
<div class='dropdown d-inline-block dropleft '>
|
|
<a href='#'' class='btn btn-sm btn-icon btn-outline-primary rounded-circle shadow-0' data-toggle='dropdown' aria-expanded='true' title='More options'>
|
|
<i class="fal fa-ellipsis-v"></i>
|
|
</a>
|
|
<div class='dropdown-menu'>
|
|
<a class='dropdown-item' href='javascript:void(0);'>Change Status</a>
|
|
<a class='dropdown-item' href='javascript:void(0);'>Generate Report</a>
|
|
</div>
|
|
</div>`;
|
|
|
|
ES5 example below:
|
|
|
|
*/
|
|
return "\n\t\t\t\t\t\t<a href='javascript:void(0);' class='btn btn-sm btn-icon btn-outline-danger rounded-circle mr-1' title='Delete Record'>\n\t\t\t\t\t\t\t<i class=\"fal fa-times\"></i>\n\t\t\t\t\t\t</a>\n\t\t\t\t\t\t<div class='dropdown d-inline-block dropleft'>\n\t\t\t\t\t\t\t<a href='#'' class='btn btn-sm btn-icon btn-outline-primary rounded-circle shadow-0' data-toggle='dropdown' aria-expanded='true' title='More options'>\n\t\t\t\t\t\t\t\t<i class=\"fal fa-ellipsis-v\"></i>\n\t\t\t\t\t\t\t</a>\n\t\t\t\t\t\t\t<div class='dropdown-menu'>\n\t\t\t\t\t\t\t\t<a class='dropdown-item' href='javascript:void(0);'>Change Status</a>\n\t\t\t\t\t\t\t\t<a class='dropdown-item' href='javascript:void(0);'>Generate Report</a>\n\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t</div>";
|
|
},
|
|
},
|
|
|
|
]
|
|
});
|
|
|
|
});
|
|
|