first commit
This commit is contained in:
commit
b71ea45681
898 changed files with 138202 additions and 0 deletions
321
static/assets/js/tables-datatables-basic.js
Normal file
321
static/assets/js/tables-datatables-basic.js
Normal file
|
|
@ -0,0 +1,321 @@
|
|||
"use strict";
|
||||
let fv, offCanvasEl;
|
||||
document.addEventListener("DOMContentLoaded", function (e) {
|
||||
var t;
|
||||
t = document.getElementById("form-add-new-record"), setTimeout(() => {
|
||||
const e = document.querySelector(".create-new"), t = document.querySelector("#add-new-record");
|
||||
e && e.addEventListener("click", function () {
|
||||
offCanvasEl = new bootstrap.Offcanvas(t), t.querySelector(".dt-full-name").value = "", t.querySelector(".dt-post").value = "", t.querySelector(".dt-email").value = "", t.querySelector(".dt-date").value = "", t.querySelector(".dt-salary").value = "", offCanvasEl.show()
|
||||
})
|
||||
}, 200), fv = FormValidation.formValidation(t, {
|
||||
fields: {
|
||||
basicFullname: {validators: {notEmpty: {message: "The name is required"}}},
|
||||
basicPost: {validators: {notEmpty: {message: "Post field is required"}}},
|
||||
basicEmail: {
|
||||
validators: {
|
||||
notEmpty: {message: "The Email is required"},
|
||||
emailAddress: {message: "The value is not a valid email address"}
|
||||
}
|
||||
},
|
||||
basicDate: {
|
||||
validators: {
|
||||
notEmpty: {message: "Joining Date is required"},
|
||||
date: {format: "MM/DD/YYYY", message: "The value is not a valid date"}
|
||||
}
|
||||
},
|
||||
basicSalary: {validators: {notEmpty: {message: "Basic Salary is required"}}}
|
||||
},
|
||||
plugins: {
|
||||
trigger: new FormValidation.plugins.Trigger,
|
||||
bootstrap5: new FormValidation.plugins.Bootstrap5({eleValidClass: "", rowSelector: ".col-sm-12"}),
|
||||
submitButton: new FormValidation.plugins.SubmitButton,
|
||||
autoFocus: new FormValidation.plugins.AutoFocus
|
||||
},
|
||||
init: e => {
|
||||
e.on("plugins.message.placed", function (e) {
|
||||
e.element.parentElement.classList.contains("input-group") && e.element.parentElement.insertAdjacentElement("afterend", e.messageElement)
|
||||
})
|
||||
}
|
||||
}), (t = document.querySelector('[name="basicDate"]')) && t.flatpickr({
|
||||
enableTime: !1, dateFormat: "m/d/Y", onChange: function () {
|
||||
fv.revalidateField("basicDate")
|
||||
}
|
||||
})
|
||||
}), $(function () {
|
||||
var l, t, e = $(".datatables-basic"), a = $(".dt-complex-header"), s = $(".dt-row-grouping"), n = $(".dt-multilingual"),
|
||||
r = (e.length && (l = e.DataTable({
|
||||
ajax: assetsPath + "json/table-datatable.json",
|
||||
columns: [{data: ""}, {data: "id"}, {data: "id"}, {data: "full_name"}, {data: "email"}, {data: "start_date"}, {data: "salary"}, {data: "status"}, {data: ""}],
|
||||
columnDefs: [{
|
||||
className: "control",
|
||||
orderable: !1,
|
||||
searchable: !1,
|
||||
responsivePriority: 2,
|
||||
targets: 0,
|
||||
render: function (e, t, a, s) {
|
||||
return ""
|
||||
}
|
||||
}, {
|
||||
targets: 1,
|
||||
orderable: !1,
|
||||
searchable: !1,
|
||||
responsivePriority: 3,
|
||||
checkboxes: !0,
|
||||
checkboxes: {selectAllRender: '<input type="checkbox" class="form-check-input">'},
|
||||
render: function () {
|
||||
return '<input type="checkbox" class="dt-checkboxes form-check-input">'
|
||||
}
|
||||
}, {targets: 2, searchable: !1, visible: !1}, {
|
||||
targets: 3, responsivePriority: 4, render: function (e, t, a, s) {
|
||||
var n = a.avatar, l = a.full_name, r = a.post;
|
||||
return '<div class="d-flex justify-content-start align-items-center user-name"><div class="avatar-wrapper"><div class="avatar me-2">' + (n ? '<img src="' + assetsPath + "img/avatars/" + n + '" alt="Avatar" class="rounded-circle">' : '<span class="avatar-initial rounded-circle bg-label-' + ["success", "danger", "warning", "info", "dark", "primary", "secondary"][Math.floor(6 * Math.random())] + '">' + (n = (((n = (l = a.full_name).match(/\b\w/g) || []).shift() || "") + (n.pop() || "")).toUpperCase()) + "</span>") + '</div></div><div class="d-flex flex-column"><span class="emp_name text-truncate">' + l + '</span><small class="emp_post text-truncate text-muted">' + r + "</small></div></div>"
|
||||
}
|
||||
}, {responsivePriority: 1, targets: 4}, {
|
||||
targets: -2, render: function (e, t, a, s) {
|
||||
var a = a.status, n = {
|
||||
1: {title: "Current", class: "bg-label-primary"},
|
||||
2: {title: "Professional", class: " bg-label-success"},
|
||||
3: {title: "Rejected", class: " bg-label-danger"},
|
||||
4: {title: "Resigned", class: " bg-label-warning"},
|
||||
5: {title: "Applied", class: " bg-label-info"}
|
||||
};
|
||||
return void 0 === n[a] ? e : '<span class="badge ' + n[a].class + '">' + n[a].title + "</span>"
|
||||
}
|
||||
}, {
|
||||
targets: -1, title: "Actions", orderable: !1, searchable: !1, render: function (e, t, a, s) {
|
||||
return '<div class="d-inline-block"><a href="javascript:;" class="btn btn-sm btn-icon dropdown-toggle hide-arrow" data-bs-toggle="dropdown"><i class="bx bx-dots-vertical-rounded"></i></a><ul class="dropdown-menu dropdown-menu-end m-0"><li><a href="javascript:;" class="dropdown-item">Details</a></li><li><a href="javascript:;" class="dropdown-item">Archive</a></li><div class="dropdown-divider"></div><li><a href="javascript:;" class="dropdown-item text-danger delete-record">Delete</a></li></ul></div><a href="javascript:;" class="btn btn-sm btn-icon item-edit"><i class="bx bxs-edit"></i></a>'
|
||||
}
|
||||
}],
|
||||
order: [[2, "desc"]],
|
||||
dom: '<"card-header flex-column flex-md-row"<"head-label text-center"><"dt-action-buttons text-end pt-3 pt-md-0"B>><"row"<"col-sm-12 col-md-6"l><"col-sm-12 col-md-6 d-flex justify-content-center justify-content-md-end"f>>t<"row"<"col-sm-12 col-md-6"i><"col-sm-12 col-md-6"p>>',
|
||||
displayLength: 7,
|
||||
lengthMenu: [7, 10, 25, 50, 75, 100],
|
||||
buttons: [{
|
||||
extend: "collection",
|
||||
className: "btn btn-label-primary dropdown-toggle me-2",
|
||||
text: '<i class="bx bx-export me-sm-1"></i> <span class="d-none d-sm-inline-block">Export</span>',
|
||||
buttons: [{
|
||||
extend: "print",
|
||||
text: '<i class="bx bx-printer me-1" ></i>Print',
|
||||
className: "dropdown-item",
|
||||
exportOptions: {
|
||||
columns: [3, 4, 5, 6, 7], format: {
|
||||
body: function (e, t, a) {
|
||||
var s;
|
||||
return e.length <= 0 ? e : (e = $.parseHTML(e), s = "", $.each(e, function (e, t) {
|
||||
void 0 !== t.classList && t.classList.contains("user-name") ? s += t.lastChild.firstChild.textContent : void 0 === t.innerText ? s += t.textContent : s += t.innerText
|
||||
}), s)
|
||||
}
|
||||
}
|
||||
},
|
||||
customize: function (e) {
|
||||
$(e.document.body).css("color", config.colors.headingColor).css("border-color", config.colors.borderColor).css("background-color", config.colors.bodyBg), $(e.document.body).find("table").addClass("compact").css("color", "inherit").css("border-color", "inherit").css("background-color", "inherit")
|
||||
}
|
||||
}, {
|
||||
extend: "csv",
|
||||
text: '<i class="bx bx-file me-1" ></i>Csv',
|
||||
className: "dropdown-item",
|
||||
exportOptions: {
|
||||
columns: [3, 4, 5, 6, 7], format: {
|
||||
body: function (e, t, a) {
|
||||
var s;
|
||||
return e.length <= 0 ? e : (e = $.parseHTML(e), s = "", $.each(e, function (e, t) {
|
||||
void 0 !== t.classList && t.classList.contains("user-name") ? s += t.lastChild.firstChild.textContent : void 0 === t.innerText ? s += t.textContent : s += t.innerText
|
||||
}), s)
|
||||
}
|
||||
}
|
||||
}
|
||||
}, {
|
||||
extend: "excel",
|
||||
text: '<i class="bx bxs-file-export me-1"></i>Excel',
|
||||
className: "dropdown-item",
|
||||
exportOptions: {
|
||||
columns: [3, 4, 5, 6, 7], format: {
|
||||
body: function (e, t, a) {
|
||||
var s;
|
||||
return e.length <= 0 ? e : (e = $.parseHTML(e), s = "", $.each(e, function (e, t) {
|
||||
void 0 !== t.classList && t.classList.contains("user-name") ? s += t.lastChild.firstChild.textContent : void 0 === t.innerText ? s += t.textContent : s += t.innerText
|
||||
}), s)
|
||||
}
|
||||
}
|
||||
}
|
||||
}, {
|
||||
extend: "pdf",
|
||||
text: '<i class="bx bxs-file-pdf me-1"></i>Pdf',
|
||||
className: "dropdown-item",
|
||||
exportOptions: {
|
||||
columns: [3, 4, 5, 6, 7], format: {
|
||||
body: function (e, t, a) {
|
||||
var s;
|
||||
return e.length <= 0 ? e : (e = $.parseHTML(e), s = "", $.each(e, function (e, t) {
|
||||
void 0 !== t.classList && t.classList.contains("user-name") ? s += t.lastChild.firstChild.textContent : void 0 === t.innerText ? s += t.textContent : s += t.innerText
|
||||
}), s)
|
||||
}
|
||||
}
|
||||
}
|
||||
}, {
|
||||
extend: "copy",
|
||||
text: '<i class="bx bx-copy me-1" ></i>Copy',
|
||||
className: "dropdown-item",
|
||||
exportOptions: {
|
||||
columns: [3, 4, 5, 6, 7], format: {
|
||||
body: function (e, t, a) {
|
||||
var s;
|
||||
return e.length <= 0 ? e : (e = $.parseHTML(e), s = "", $.each(e, function (e, t) {
|
||||
void 0 !== t.classList && t.classList.contains("user-name") ? s += t.lastChild.firstChild.textContent : void 0 === t.innerText ? s += t.textContent : s += t.innerText
|
||||
}), s)
|
||||
}
|
||||
}
|
||||
}
|
||||
}]
|
||||
}, {
|
||||
text: '<i class="bx bx-plus me-sm-1"></i> <span class="d-none d-sm-inline-block">Add New Record</span>',
|
||||
className: "create-new btn btn-primary"
|
||||
}],
|
||||
responsive: {
|
||||
details: {
|
||||
display: $.fn.dataTable.Responsive.display.modal({
|
||||
header: function (e) {
|
||||
return "Details of " + e.data().full_name
|
||||
}
|
||||
}), type: "column", renderer: function (e, t, a) {
|
||||
a = $.map(a, function (e, t) {
|
||||
return "" !== e.title ? '<tr data-dt-row="' + e.rowIndex + '" data-dt-column="' + e.columnIndex + '"><td>' + e.title + ":</td> <td>" + e.data + "</td></tr>" : ""
|
||||
}).join("");
|
||||
return !!a && $('<table class="table"/><tbody />').append(a)
|
||||
}
|
||||
}
|
||||
}
|
||||
}), $("div.head-label").html('<h5 class="card-title mb-0">DataTable with Buttons</h5>'), $(".dt-buttons > .btn-group > button").removeClass("btn-secondary")), 101);
|
||||
fv.on("core.form.valid", function () {
|
||||
var e = $(".add-new-record .dt-full-name").val(), t = $(".add-new-record .dt-post").val(), a = $(".add-new-record .dt-email").val(),
|
||||
s = $(".add-new-record .dt-date").val(), n = $(".add-new-record .dt-salary").val();
|
||||
"" != e && (l.row.add({
|
||||
id: r,
|
||||
full_name: e,
|
||||
post: t,
|
||||
email: a,
|
||||
start_date: s,
|
||||
salary: "$" + n,
|
||||
status: 5
|
||||
}).draw(), r++, offCanvasEl.hide())
|
||||
}), $(".datatables-basic tbody").on("click", ".delete-record", function () {
|
||||
l.row($(this).parents("tr")).remove().draw()
|
||||
}), a.length && a.DataTable({
|
||||
ajax: assetsPath + "json/table-datatable.json",
|
||||
columns: [{data: "full_name"}, {data: "email"}, {data: "city"}, {data: "post"}, {data: "salary"}, {data: "status"}, {data: ""}],
|
||||
columnDefs: [{
|
||||
targets: -2, render: function (e, t, a, s) {
|
||||
var a = a.status, n = {
|
||||
1: {title: "Current", class: "bg-label-primary"},
|
||||
2: {title: "Professional", class: " bg-label-success"},
|
||||
3: {title: "Rejected", class: " bg-label-danger"},
|
||||
4: {title: "Resigned", class: " bg-label-warning"},
|
||||
5: {title: "Applied", class: " bg-label-info"}
|
||||
};
|
||||
return void 0 === n[a] ? e : '<span class="badge ' + n[a].class + '">' + n[a].title + "</span>"
|
||||
}
|
||||
}, {
|
||||
targets: -1, title: "Actions", orderable: !1, render: function (e, t, a, s) {
|
||||
return '<div class="d-inline-block"><a href="javascript:;" class="btn btn-sm btn-icon dropdown-toggle hide-arrow" data-bs-toggle="dropdown"><i class="bx bx-dots-vertical-rounded"></i></a><div class="dropdown-menu dropdown-menu-end m-0"><a href="javascript:;" class="dropdown-item">Details</a><a href="javascript:;" class="dropdown-item">Archive</a><div class="dropdown-divider"></div><a href="javascript:;" class="dropdown-item text-danger delete-record">Delete</a></div></div><a href="javascript:;" class="btn btn-sm btn-icon item-edit"><i class="bx bxs-edit"></i></a>'
|
||||
}
|
||||
}],
|
||||
dom: '<"row"<"col-sm-12 col-md-6"l><"col-sm-12 col-md-6 d-flex justify-content-center justify-content-md-end"f>><"table-responsive"t><"row"<"col-sm-12 col-md-6"i><"col-sm-12 col-md-6"p>>',
|
||||
displayLength: 7,
|
||||
lengthMenu: [7, 10, 25, 50, 75, 100]
|
||||
}), s.length && (t = s.DataTable({
|
||||
ajax: assetsPath + "json/table-datatable.json",
|
||||
columns: [{data: ""}, {data: "full_name"}, {data: "post"}, {data: "email"}, {data: "city"}, {data: "start_date"}, {data: "salary"}, {data: "status"}, {data: ""}],
|
||||
columnDefs: [{
|
||||
className: "control", orderable: !1, targets: 0, searchable: !1, render: function (e, t, a, s) {
|
||||
return ""
|
||||
}
|
||||
}, {visible: !1, targets: 2}, {
|
||||
targets: -2, render: function (e, t, a, s) {
|
||||
var a = a.status, n = {
|
||||
1: {title: "Current", class: "bg-label-primary"},
|
||||
2: {title: "Professional", class: " bg-label-success"},
|
||||
3: {title: "Rejected", class: " bg-label-danger"},
|
||||
4: {title: "Resigned", class: " bg-label-warning"},
|
||||
5: {title: "Applied", class: " bg-label-info"}
|
||||
};
|
||||
return void 0 === n[a] ? e : '<span class="badge ' + n[a].class + '">' + n[a].title + "</span>"
|
||||
}
|
||||
}, {
|
||||
targets: -1, title: "Actions", orderable: !1, searchable: !1, render: function (e, t, a, s) {
|
||||
return '<div class="d-inline-block"><a href="javascript:;" class="btn btn-sm btn-icon dropdown-toggle hide-arrow" data-bs-toggle="dropdown"><i class="bx bx-dots-vertical-rounded"></i></a><div class="dropdown-menu dropdown-menu-end m-0"><a href="javascript:;" class="dropdown-item">Details</a><a href="javascript:;" class="dropdown-item">Archive</a><div class="dropdown-divider"></div><a href="javascript:;" class="dropdown-item text-danger delete-record">Delete</a></div></div><a href="javascript:;" class="btn btn-sm btn-icon item-edit"><i class="bx bxs-edit"></i></a>'
|
||||
}
|
||||
}],
|
||||
order: [[2, "asc"]],
|
||||
dom: '<"row"<"col-sm-12 col-md-6"l><"col-sm-12 col-md-6 d-flex justify-content-center justify-content-md-end"f>>t<"row"<"col-sm-12 col-md-6"i><"col-sm-12 col-md-6"p>>',
|
||||
displayLength: 7,
|
||||
lengthMenu: [7, 10, 25, 50, 75, 100],
|
||||
drawCallback: function (e) {
|
||||
var t = this.api(), a = t.rows({page: "current"}).nodes(), s = null;
|
||||
t.column(2, {page: "current"}).data().each(function (e, t) {
|
||||
s !== e && ($(a).eq(t).before('<tr class="group"><td colspan="8">' + e + "</td></tr>"), s = e)
|
||||
})
|
||||
},
|
||||
responsive: {
|
||||
details: {
|
||||
display: $.fn.dataTable.Responsive.display.modal({
|
||||
header: function (e) {
|
||||
return "Details of " + e.data().full_name
|
||||
}
|
||||
}), type: "column", renderer: function (e, t, a) {
|
||||
a = $.map(a, function (e, t) {
|
||||
return "" !== e.title ? '<tr data-dt-row="' + e.rowIndex + '" data-dt-column="' + e.columnIndex + '"><td>' + e.title + ":</td> <td>" + e.data + "</td></tr>" : ""
|
||||
}).join("");
|
||||
return !!a && $('<table class="table"/><tbody />').append(a)
|
||||
}
|
||||
}
|
||||
}
|
||||
}), $(".dt-row-grouping tbody").on("click", "tr.group", function () {
|
||||
var e = t.order()[0];
|
||||
(2 === e[0] && "asc" === e[1] ? t.order([2, "desc"]) : t.order([2, "asc"])).draw()
|
||||
}));
|
||||
n.length && n.DataTable({
|
||||
ajax: assetsPath + "json/table-datatable.json",
|
||||
columns: [{data: ""}, {data: "full_name"}, {data: "post"}, {data: "email"}, {data: "start_date"}, {data: "salary"}, {data: "status"}, {data: ""}],
|
||||
columnDefs: [{
|
||||
className: "control", orderable: !1, targets: 0, searchable: !1, render: function (e, t, a, s) {
|
||||
return ""
|
||||
}
|
||||
}, {
|
||||
targets: -2, render: function (e, t, a, s) {
|
||||
var a = a.status, n = {
|
||||
1: {title: "Current", class: "bg-label-primary"},
|
||||
2: {title: "Professional", class: " bg-label-success"},
|
||||
3: {title: "Rejected", class: " bg-label-danger"},
|
||||
4: {title: "Resigned", class: " bg-label-warning"},
|
||||
5: {title: "Applied", class: " bg-label-info"}
|
||||
};
|
||||
return void 0 === n[a] ? e : '<span class="badge ' + n[a].class + '">' + n[a].title + "</span>"
|
||||
}
|
||||
}, {
|
||||
targets: -1, title: "Actions", orderable: !1, searchable: !1, render: function (e, t, a, s) {
|
||||
return '<div class="d-inline-block"><a href="javascript:;" class="btn btn-sm btn-icon dropdown-toggle hide-arrow" data-bs-toggle="dropdown"><i class="bx bx-dots-vertical-rounded"></i></a><div class="dropdown-menu dropdown-menu-end m-0"><a href="javascript:;" class="dropdown-item">Details</a><a href="javascript:;" class="dropdown-item">Archive</a><div class="dropdown-divider"></div><a href="javascript:;" class="dropdown-item text-danger delete-record">Delete</a></div></div><a href="javascript:;" class="btn btn-sm btn-icon item-edit"><i class="bx bxs-edit"></i></a>'
|
||||
}
|
||||
}],
|
||||
language: {url: "//cdn.datatables.net/plug-ins/9dcbecd42ad/i18n/German.json"},
|
||||
displayLength: 7,
|
||||
dom: '<"row"<"col-sm-12 col-md-6"l><"col-sm-12 col-md-6 d-flex justify-content-center justify-content-md-end"f>>t<"row"<"col-sm-12 col-md-6"i><"col-sm-12 col-md-6"p>>',
|
||||
lengthMenu: [7, 10, 25, 50, 75, 100],
|
||||
responsive: {
|
||||
details: {
|
||||
display: $.fn.dataTable.Responsive.display.modal({
|
||||
header: function (e) {
|
||||
return "Details of " + e.data().full_name
|
||||
}
|
||||
}), type: "column", renderer: function (e, t, a) {
|
||||
a = $.map(a, function (e, t) {
|
||||
return "" !== e.title ? '<tr data-dt-row="' + e.rowIndex + '" data-dt-column="' + e.columnIndex + '"><td>' + e.title + ":</td> <td>" + e.data + "</td></tr>" : ""
|
||||
}).join("");
|
||||
return !!a && $('<table class="table"/><tbody />').append(a)
|
||||
}
|
||||
}
|
||||
}
|
||||
}), setTimeout(() => {
|
||||
$(".dataTables_filter .form-control").removeClass("form-control-sm"), $(".dataTables_length .form-select").removeClass("form-select-sm")
|
||||
}, 300)
|
||||
});
|
||||
Loading…
Add table
Add a link
Reference in a new issue