talksik/nirvana
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

adding files of assets

Browse Source
This commit is contained in:
Arjun Patel
2022-01-10 22:32:53 -08:00
parent f2779a0c2e
commit 91a01f7b7c
1582 changed files with 424006 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files
assets/js/custom/documentation/general/datatables/advanced.js
+160
View File
@@ -0,0 +1,160 @@
"use strict";
// Class definition
var KTDatatablesAdvanced = function () {
// Private functions
var _initExample1 = function() {
var status = {
1: {"title": "Pending", "state": "primary"},
2: {"title": "Delivered", "state": "danger"},
3: {"title": "Canceled", "state": "primary"},
4: {"title": "Success", "state": "success"},
5: {"title": "Info", "state": "info"},
6: {"title": "Danger", "state": "danger"},
7: {"title": "Warning", "state": "warning"},
};
$("#kt_datatable_example_1").DataTable({
"columnDefs": [
{
// The `data` parameter refers to the data for the cell (defined by the
// `data` option, which defaults to the column being worked with, in
// this case `data: 0`.
"render": function ( data, type, row ) {
var index = KTUtil.getRandomInt(1, 7);
return data + '<span class="ms-2 badge badge-light-' + status[index]['state'] + ' fw-bold">' + status[index]['title'] + '</span>';
},
"targets": 1
}
]
});
}
var _initExample2 = function() {
$("#kt_datatable_example_2").DataTable({
"columnDefs": [ {
"visible": false,
"targets": -1
}]
});
}
var _initExample3 = function() {
var groupColumn = 2;
var table = $('#kt_datatable_example_3').DataTable({
"columnDefs": [{
"visible": false,
"targets": groupColumn
}],
"order": [
[groupColumn, 'asc']
],
"displayLength": 25,
"drawCallback": function(settings) {
var api = this.api();
var rows = api.rows({
page: 'current'
}).nodes();
var last = null;
api.column(groupColumn, {
page: 'current'
}).data().each(function(group, i) {
if (last !== group) {
$(rows).eq(i).before(
'<tr class="group fs-5 fw-bolder"><td colspan="5">' + group + '</td></tr>'
);
last = group;
}
});
}
});
// Order by the grouping
$('#kt_datatable_example_3 tbody').on('click', 'tr.group', function() {
var currentOrder = table.order()[0];
if (currentOrder[0] === groupColumn && currentOrder[1] === 'asc') {
table.order([groupColumn, 'desc']).draw();
} else {
table.order([groupColumn, 'asc']).draw();
}
});
}
var _initExample4 = function() {
$("#kt_datatable_example_4").DataTable({
"footerCallback": function ( row, data, start, end, display ) {
var api = this.api(), data;
// Remove the formatting to get integer data for summation
var intVal = function ( i ) {
return typeof i === "string" ?
i.replace(/[\$,]/g, "")*1 :
typeof i === "number" ?
i : 0;
};
// Total over all pages
var total = api
.column( 4 )
.data()
.reduce( function (a, b) {
return intVal(a) + intVal(b);
}, 0 );
// Total over this page
var pageTotal = api
.column( 4, { page: "current"} )
.data()
.reduce( function (a, b) {
return intVal(a) + intVal(b);
}, 0 );
// Update footer
$( api.column( 4 ).footer() ).html(
"$"+pageTotal +" ( $"+ total +" total)"
);
}
});
}
var _initExample5 = function() {
$("#kt_datatable_example_5").DataTable({
"language": {
"lengthMenu": "Show _MENU_",
},
"dom":
"<'row'" +
"<'col-sm-6 d-flex align-items-center justify-conten-start'l>" +
"<'col-sm-6 d-flex align-items-center justify-content-end'f>" +
">" +
"<'table-responsive'tr>" +
"<'row'" +
"<'col-sm-12 col-md-5 d-flex align-items-center justify-content-center justify-content-md-start'i>" +
"<'col-sm-12 col-md-7 d-flex align-items-center justify-content-center justify-content-md-end'p>" +
">"
});
}
// Public methods
return {
init: function () {
_initExample1();
_initExample2();
_initExample3();
_initExample4();
_initExample5();
}
}
}();
// On document ready
KTUtil.onDOMContentLoaded(function() {
KTDatatablesAdvanced.init();
});
assets/js/custom/documentation/general/datatables/api.js
+57
View File
@@ -0,0 +1,57 @@
"use strict";
// Class definition
var KTDatatablesApi = function () {
// Private functions
var _initExample1 = function() {
var t = $("#kt_datatable_example_1").DataTable();
var counter = 1;
$("#kt_datatable_example_1_addrow").on( "click", function () {
t.row.add( [
counter +".1",
counter +".2",
counter +".3",
counter +".4",
counter +".5",
] ).draw( false );
counter++;
} );
// Automatically add a first row of data
$("#kt_datatable_example_1_addrow").click();
}
var _initExample2 = function() {
var table = $("#kt_datatable_example_2").DataTable({
columnDefs: [{
orderable: false,
targets: [1,2,3]
}]
});
$("#kt_datatable_example_2_submit").click( function() {
var data = table.$("input, select").serialize();
alert(
"The following data would have been submitted to the server: \n\n"+
data.substr( 0, 120 )+"..."
);
return false;
});
}
// Public methods
return {
init: function () {
_initExample1();
_initExample2();
}
}
}();
// On document ready
KTUtil.onDOMContentLoaded(function() {
KTDatatablesApi.init();
});
assets/js/custom/documentation/general/datatables/basic.js
+47
View File
@@ -0,0 +1,47 @@
"use strict";
// Class definition
var KTDatatablesBasic = function () {
// Private functions
var _initExample1 = function() {
$("#kt_datatable_example_1").DataTable();
}
var _initExample2 = function() {
$("#kt_datatable_example_2").DataTable({
"scrollY": "500px",
"scrollCollapse": true,
"paging": false,
"dom": "<'table-responsive'tr>"
});
}
var _initExample3 = function() {
$("#kt_datatable_example_3").DataTable({
"scrollX": true
});
}
var _initExample4 = function() {
$("#kt_datatable_example_4").DataTable({
"scrollY": 300,
"scrollX": true
});
}
// Public methods
return {
init: function () {
_initExample1();
_initExample2();
_initExample3();
_initExample4();
}
}
}();
// On document ready
KTUtil.onDOMContentLoaded(function() {
KTDatatablesBasic.init();
});
assets/js/custom/documentation/general/datatables/server-side.js
+355
View File
@@ -0,0 +1,355 @@
"use strict";
// Class definition
var KTDatatablesServerSide = function () {
// Shared variables
var table;
var dt;
var filterPayment;
// Private functions
var initDatatable = function () {
dt = $("#kt_datatable_example_1").DataTable({
searchDelay: 500,
processing: true,
serverSide: true,
order: [[5, 'desc']],
stateSave: true,
select: {
style: 'os',
selector: 'td:first-child',
className: 'row-selected'
},
ajax: {
url: "https://preview.keenthemes.com/api/datatables.php",
},
columns: [
{ data: 'RecordID' },
{ data: 'Name' },
{ data: 'Email' },
{ data: 'Company' },
{ data: 'CreditCardNumber' },
{ data: 'Datetime' },
{ data: null },
],
columnDefs: [
{
targets: 0,
orderable: false,
render: function (data) {
return `
<div class="form-check form-check-sm form-check-custom form-check-solid">
<input class="form-check-input" type="checkbox" value="${data}" />
</div>`;
}
},
{
targets: 4,
render: function (data, type, row) {
return `<img src="${hostUrl}media/svg/card-logos/${row.CreditCardType}.svg" class="w-35px me-3" alt="${row.CreditCardType}">` + data;
}
},
{
targets: -1,
data: null,
orderable: false,
className: 'text-end',
render: function (data, type, row) {
return `
<a href="#" class="btn btn-light btn-active-light-primary btn-sm" data-kt-menu-trigger="click" data-kt-menu-placement="bottom-end" data-kt-menu-flip="top-end">
Actions
<span class="svg-icon svg-icon-5 m-0">
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="24px" height="24px" viewBox="0 0 24 24" version="1.1">
<g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
<polygon points="0 0 24 0 24 24 0 24"></polygon>
<path d="M6.70710678,15.7071068 C6.31658249,16.0976311 5.68341751,16.0976311 5.29289322,15.7071068 C4.90236893,15.3165825 4.90236893,14.6834175 5.29289322,14.2928932 L11.2928932,8.29289322 C11.6714722,7.91431428 12.2810586,7.90106866 12.6757246,8.26284586 L18.6757246,13.7628459 C19.0828436,14.1360383 19.1103465,14.7686056 18.7371541,15.1757246 C18.3639617,15.5828436 17.7313944,15.6103465 17.3242754,15.2371541 L12.0300757,10.3841378 L6.70710678,15.7071068 Z" fill="#000000" fill-rule="nonzero" transform="translate(12.000003, 11.999999) rotate(-180.000000) translate(-12.000003, -11.999999)"></path>
</g>
</svg>
</span>
</a>
<!--begin::Menu-->
<div class="menu menu-sub menu-sub-dropdown menu-column menu-rounded menu-gray-600 menu-state-bg-light-primary fw-bold fs-7 w-125px py-4" data-kt-menu="true">
<!--begin::Menu item-->
<div class="menu-item px-3">
<a href="#" class="menu-link px-3" data-kt-docs-table-filter="edit_row">
Edit
</a>
</div>
<!--end::Menu item-->
<!--begin::Menu item-->
<div class="menu-item px-3">
<a href="#" class="menu-link px-3" data-kt-docs-table-filter="delete_row">
Delete
</a>
</div>
<!--end::Menu item-->
</div>
<!--end::Menu-->
`;
},
},
],
// Add data-filter attribute
createdRow: function (row, data, dataIndex) {
$(row).find('td:eq(4)').attr('data-filter', data.CreditCardType);
}
});
table = dt.$;
// Re-init functions on every table re-draw -- more info: https://datatables.net/reference/event/draw
dt.on('draw', function () {
initToggleToolbar();
toggleToolbars();
handleDeleteRows();
KTMenu.createInstances();
});
}
// Search Datatable --- official docs reference: https://datatables.net/reference/api/search()
var handleSearchDatatable = function () {
const filterSearch = document.querySelector('[data-kt-docs-table-filter="search"]');
filterSearch.addEventListener('keyup', function (e) {
dt.search(e.target.value).draw();
});
}
// Filter Datatable
var handleFilterDatatable = () => {
// Select filter options
filterPayment = document.querySelectorAll('[data-kt-docs-table-filter="payment_type"] [name="payment_type"]');
const filterButton = document.querySelector('[data-kt-docs-table-filter="filter"]');
// Filter datatable on submit
filterButton.addEventListener('click', function () {
// Get filter values
let paymentValue = '';
// Get payment value
filterPayment.forEach(r => {
if (r.checked) {
paymentValue = r.value;
}
// Reset payment value if "All" is selected
if (paymentValue === 'all') {
paymentValue = '';
}
});
// Filter datatable --- official docs reference: https://datatables.net/reference/api/search()
dt.search(paymentValue).draw();
});
}
// Delete customer
var handleDeleteRows = () => {
// Select all delete buttons
const deleteButtons = document.querySelectorAll('[data-kt-docs-table-filter="delete_row"]');
deleteButtons.forEach(d => {
// Delete button on click
d.addEventListener('click', function (e) {
e.preventDefault();
// Select parent row
const parent = e.target.closest('tr');
// Get customer name
const customerName = parent.querySelectorAll('td')[1].innerText;
// SweetAlert2 pop up --- official docs reference: https://sweetalert2.github.io/
Swal.fire({
text: "Are you sure you want to delete " + customerName + "?",
icon: "warning",
showCancelButton: true,
buttonsStyling: false,
confirmButtonText: "Yes, delete!",
cancelButtonText: "No, cancel",
customClass: {
confirmButton: "btn fw-bold btn-danger",
cancelButton: "btn fw-bold btn-active-light-primary"
}
}).then(function (result) {
if (result.value) {
// Simulate delete request -- for demo purpose only
Swal.fire({
text: "Deleting " + customerName,
icon: "info",
buttonsStyling: false,
showConfirmButton: false,
timer: 2000
}).then(function () {
Swal.fire({
text: "You have deleted " + customerName + "!.",
icon: "success",
buttonsStyling: false,
confirmButtonText: "Ok, got it!",
customClass: {
confirmButton: "btn fw-bold btn-primary",
}
}).then(function () {
// delete row data from server and re-draw datatable
dt.draw();
});
});
} else if (result.dismiss === 'cancel') {
Swal.fire({
text: customerName + " was not deleted.",
icon: "error",
buttonsStyling: false,
confirmButtonText: "Ok, got it!",
customClass: {
confirmButton: "btn fw-bold btn-primary",
}
});
}
});
})
});
}
// Reset Filter
var handleResetForm = () => {
// Select reset button
const resetButton = document.querySelector('[data-kt-docs-table-filter="reset"]');
// Reset datatable
resetButton.addEventListener('click', function () {
// Reset payment type
filterPayment[0].checked = true;
// Reset datatable --- official docs reference: https://datatables.net/reference/api/search()
dt.search('').draw();
});
}
// Init toggle toolbar
var initToggleToolbar = function () {
// Toggle selected action toolbar
// Select all checkboxes
const container = document.querySelector('#kt_datatable_example_1');
const checkboxes = container.querySelectorAll('[type="checkbox"]');
// Select elements
const deleteSelected = document.querySelector('[data-kt-docs-table-select="delete_selected"]');
// Toggle delete selected toolbar
checkboxes.forEach(c => {
// Checkbox on click event
c.addEventListener('click', function () {
setTimeout(function () {
toggleToolbars();
}, 50);
});
});
// Deleted selected rows
deleteSelected.addEventListener('click', function () {
// SweetAlert2 pop up --- official docs reference: https://sweetalert2.github.io/
Swal.fire({
text: "Are you sure you want to delete selected customers?",
icon: "warning",
showCancelButton: true,
buttonsStyling: false,
showLoaderOnConfirm: true,
confirmButtonText: "Yes, delete!",
cancelButtonText: "No, cancel",
customClass: {
confirmButton: "btn fw-bold btn-danger",
cancelButton: "btn fw-bold btn-active-light-primary"
},
}).then(function (result) {
if (result.value) {
// Simulate delete request -- for demo purpose only
Swal.fire({
text: "Deleting selected customers",
icon: "info",
buttonsStyling: false,
showConfirmButton: false,
timer: 2000
}).then(function () {
Swal.fire({
text: "You have deleted all selected customers!.",
icon: "success",
buttonsStyling: false,
confirmButtonText: "Ok, got it!",
customClass: {
confirmButton: "btn fw-bold btn-primary",
}
}).then(function () {
// delete row data from server and re-draw datatable
dt.draw();
});
// Remove header checked box
const headerCheckbox = container.querySelectorAll('[type="checkbox"]')[0];
headerCheckbox.checked = false;
});
} else if (result.dismiss === 'cancel') {
Swal.fire({
text: "Selected customers was not deleted.",
icon: "error",
buttonsStyling: false,
confirmButtonText: "Ok, got it!",
customClass: {
confirmButton: "btn fw-bold btn-primary",
}
});
}
});
});
}
// Toggle toolbars
var toggleToolbars = function () {
// Define variables
const container = document.querySelector('#kt_datatable_example_1');
const toolbarBase = document.querySelector('[data-kt-docs-table-toolbar="base"]');
const toolbarSelected = document.querySelector('[data-kt-docs-table-toolbar="selected"]');
const selectedCount = document.querySelector('[data-kt-docs-table-select="selected_count"]');
// Select refreshed checkbox DOM elements
const allCheckboxes = container.querySelectorAll('tbody [type="checkbox"]');
// Detect checkboxes state & count
let checkedState = false;
let count = 0;
// Count checked boxes
allCheckboxes.forEach(c => {
if (c.checked) {
checkedState = true;
count++;
}
});
// Toggle toolbars
if (checkedState) {
selectedCount.innerHTML = count;
toolbarBase.classList.add('d-none');
toolbarSelected.classList.remove('d-none');
} else {
toolbarBase.classList.remove('d-none');
toolbarSelected.classList.add('d-none');
}
}
// Public methods
return {
init: function () {
initDatatable();
handleSearchDatatable();
initToggleToolbar();
handleFilterDatatable();
handleDeleteRows();
handleResetForm();
}
}
}();
// On document ready
KTUtil.onDOMContentLoaded(function () {
KTDatatablesServerSide.init();
});