/**
* DataTables Extensions (js)
*/
'use strict';
document.addEventListener('DOMContentLoaded', function (e) {
const dt_scrollable_table = document.querySelector('.dt-scrollableTable');
let dt_scrollableTable;
// Scrollable
// --------------------------------------------------------------------
if (dt_scrollable_table) {
dt_scrollableTable = new DataTable(dt_scrollable_table, {
ajax: assetsPath + 'json/table-datatable.json',
columns: [
{ data: 'full_name' },
{ data: 'post' },
{ data: 'email' },
{ data: 'city' },
{ data: 'start_date' },
{ data: 'salary' },
{ data: 'age' },
{ data: 'experience' },
{ data: '' },
{ data: '' }
],
columnDefs: [
{
// Label
targets: -2,
render: function (data, type, full, meta) {
const statusNumber = full.status;
const statuses = {
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' }
};
if (typeof statuses[statusNumber] === 'undefined') {
return data;
}
return `
${statuses[statusNumber].title}
`;
}
},
{
// Actions
targets: -1,
title: 'Actions',
searchable: false,
className: 'd-flex align-items-center',
orderable: false,
render: function (data, type, full, meta) {
return (
'' +
''
);
}
}
],
// Scroll options
scrollY: '300px',
scrollX: true,
layout: {
topStart: {
rowClass: 'row mx-3 my-0 justify-content-between',
features: [
{
pageLength: {
menu: [7, 10, 25, 50, 100],
text: 'Show_MENU_entries'
}
}
]
},
topEnd: {
search: {
placeholder: ''
}
},
bottomStart: {
rowClass: 'row mx-3 justify-content-between',
features: ['info']
},
bottomEnd: 'paging'
},
language: {
paginate: {
next: '',
previous: '',
first: '',
last: ''
}
},
initComplete: function (settings, json) {
// Add the mti-n1 class to the first row in tbody
dt_scrollable_table.querySelector('tbody tr:first-child').classList.add('border-top-0');
}
});
}
// FixedHeader
// --------------------------------------------------------------------
const dt_fixedheader_table = document.querySelector('.dt-fixedheader');
let dt_fixedheader;
if (dt_fixedheader_table) {
dt_fixedheader = new DataTable(dt_fixedheader_table, {
ajax: assetsPath + 'json/table-datatable.json',
columns: [
{ data: '' },
{ data: 'id', orderable: false, render: DataTable.render.select() },
{ data: 'id' },
{ data: 'full_name' },
{ data: 'email' },
{ data: 'start_date' },
{ data: 'salary' },
{ data: 'status' },
{ data: '' }
],
columnDefs: [
{
className: 'control',
orderable: false,
targets: 0,
responsivePriority: 3,
render: function (data, type, full, meta) {
return '';
}
},
{
// For Checkboxes
targets: 1,
orderable: false,
render: function () {
return '';
},
checkboxes: {
selectAllRender: ''
},
responsivePriority: 4
},
{
targets: 2,
visible: false
},
{
// Avatar image/badge, Name and post
targets: 3,
render: function (data, type, full, meta) {
const userImg = full.avatar;
const name = full.full_name;
const post = full.post;
let output;
if (userImg) {
// For Avatar image
output = `
`;
} else {
// For Avatar badge
const stateNum = Math.floor(Math.random() * 6);
const states = ['success', 'danger', 'warning', 'info', 'dark', 'primary', 'secondary'];
const state = states[stateNum];
const initials = (name.match(/\b\w/g) || []).map(i => i.toUpperCase()).join('');
output = `${initials}`;
}
// Creates full output for row
const rowOutput = `
`;
return rowOutput;
},
responsivePriority: 5
},
{
responsivePriority: 1,
targets: 4
},
{
responsivePriority: 2,
targets: 6
},
{
// Label
targets: -2,
render: function (data, type, full, meta) {
const statusNumber = full.status;
const statuses = {
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' }
};
if (typeof statuses[statusNumber] === 'undefined') {
return data;
}
return `
${statuses[statusNumber].title}
`;
}
},
{
// Actions
targets: -1,
title: 'Actions',
className: 'd-flex align-items-center',
orderable: false,
render: function (data, type, full, meta) {
return (
'' +
''
);
}
}
],
select: {
style: 'multi',
selector: 'td:nth-child(2)'
},
order: [[2, 'desc']],
layout: {
topStart: {
rowClass: 'row mx-3 my-0 justify-content-between',
features: [
{
pageLength: {
menu: [7, 10, 25, 50, 100],
text: 'Show_MENU_entries'
}
}
]
},
topEnd: {
search: {
placeholder: ''
}
},
bottomStart: {
rowClass: 'row mx-3 justify-content-between',
features: ['info']
},
bottomEnd: 'paging'
},
displayLength: 7,
language: {
paginate: {
next: '',
previous: '',
first: '',
last: ''
}
},
responsive: {
details: {
display: DataTable.Responsive.display.modal({
header: function (row) {
var data = row.data();
return 'Details of ' + data['full_name'];
}
}),
type: 'column',
renderer: function (api, rowIdx, columns) {
const data = columns
.map(function (col) {
return col.title !== '' // Do not show row in modal popup if title is blank (for check box)
? `
| ${col.title}: |
${col.data} |
`
: '';
})
.join('');
if (data) {
const div = document.createElement('div');
div.classList.add('table-responsive');
const table = document.createElement('table');
div.appendChild(table);
table.classList.add('table');
const tbody = document.createElement('tbody');
tbody.innerHTML = data;
table.appendChild(tbody);
return div;
}
return false;
}
}
}
});
// Fixed header
if (window.Helpers.isNavbarFixed()) {
const navHeight = document.getElementById('layout-navbar').offsetHeight;
new DataTable.FixedHeader(dt_fixedheader).headerOffset(navHeight);
} else {
new DataTable.FixedHeader(dt_fixedheader);
}
//? The 'delete-record' class is necessary for the functionality of the following code.
document.addEventListener('click', function (e) {
if (e.target.classList.contains('delete-record')) {
dt_fixedheader.row(e.target.closest('tr')).remove().draw();
const modalEl = document.querySelector('.dtr-bs-modal');
if (modalEl && modalEl.classList.contains('show')) {
const modal = bootstrap.Modal.getInstance(modalEl);
modal?.hide();
}
}
});
}
// FixedColumns
// --------------------------------------------------------------------
const dt_fixedcolumns_table = document.querySelector('.dt-fixedcolumns');
let dt_fixedcolumns;
if (dt_fixedcolumns_table) {
let tableTitle = document.createElement('h5');
tableTitle.classList.add('card-title', 'mb-0', 'text-md-start', 'text-center', 'py-md-0', 'py-6');
tableTitle.innerHTML = 'Fixed Columns';
dt_fixedcolumns = new DataTable(dt_fixedcolumns_table, {
ajax: assetsPath + 'json/table-datatable.json',
columns: [
{ data: 'full_name' },
{ data: 'post' },
{ data: 'email' },
{ data: 'city' },
{ data: 'start_date' },
{ data: 'salary' },
{ data: 'age' },
{ data: 'experience' },
{ data: 'status' },
{ data: 'id' }
],
columnDefs: [
{
// Label
targets: -2,
render: function (data, type, full, meta) {
const statusNumber = full.status;
const statuses = {
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' }
};
if (typeof statuses[statusNumber] === 'undefined') {
return data;
}
return `
${statuses[statusNumber].title}
`;
}
},
{
// Actions
targets: -1,
title: 'Actions',
searchable: false,
className: 'd-flex align-items-center',
orderable: false,
render: function (data, type, full, meta) {
return (
'' +
''
);
}
}
],
layout: {
topStart: {
rowClass: 'row card-header pt-0 pb-0',
features: [tableTitle]
},
topEnd: {
search: {
placeholder: ''
}
},
bottomStart: {
rowClass: 'row mx-3 justify-content-between',
features: ['info']
},
bottomEnd: {
paging: {
firstLast: false
}
}
},
scrollY: 300,
scrollX: true,
scrollCollapse: true,
paging: false,
info: false,
// Fixed column option
fixedColumns: {
start: 1
},
initComplete: function (settings, json) {
// Add the mti-n1 class to the first row in tbody
dt_fixedcolumns_table.querySelector('tbody tr:first-child').classList.add('border-top-0');
}
});
//? The 'delete-record' class is necessary for the functionality of the following code.
document.addEventListener('click', function (e) {
if (e.target.classList.contains('delete-record')) {
dt_fixedcolumns.row(e.target.closest('tr')).remove().draw();
const modalEl = document.querySelector('.dtr-bs-modal');
if (modalEl && modalEl.classList.contains('show')) {
const modal = bootstrap.Modal.getInstance(modalEl);
modal?.hide();
}
}
});
}
// Select
// --------------------------------------------------------------------
const dt_select_table = document.querySelector('.dt-select-table');
let dt_select;
if (dt_select_table) {
dt_select = new DataTable(dt_select_table, {
ajax: assetsPath + 'json/table-datatable.json',
columns: [
{ data: 'id', orderable: false, render: DataTable.render.select() },
{ data: 'full_name' },
{ data: 'post' },
{ data: 'email' },
{ data: 'city' },
{ data: 'start_date' },
{ data: 'salary' },
{ data: 'status' }
],
columnDefs: [
{
// For Checkboxes
targets: 0,
searchable: false,
orderable: false,
render: function () {
return '';
},
checkboxes: {
selectRow: true,
selectAllRender: ''
}
},
{
// Label
targets: -1,
render: function (data, type, full, meta) {
const statusNumber = full.status;
const statuses = {
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' }
};
if (typeof statuses[statusNumber] === 'undefined') {
return data;
}
return `
${statuses[statusNumber].title}
`;
}
}
],
order: [[1, 'desc']],
layout: {
topStart: {
rowClass: 'row mx-3 my-0 justify-content-between',
features: [
{
pageLength: {
menu: [7, 10, 25, 50, 100],
text: 'Show_MENU_entries'
}
}
]
},
topEnd: {
search: {
placeholder: ''
}
},
bottomStart: {
rowClass: 'row mx-3 justify-content-between',
features: ['info']
},
bottomEnd: 'paging'
},
language: {
paginate: {
next: '',
previous: '',
first: '',
last: ''
}
},
select: {
// Select style
style: 'multi'
}
});
}
// Filter form control to default size
// ? setTimeout used for multilingual table initialization
setTimeout(() => {
const elementsToModify = [
{ selector: '.dt-search .form-control', classToRemove: 'form-control-sm', classToAdd: 'ms-4' },
{ selector: '.dt-length .form-select', classToRemove: 'form-select-sm' },
{ selector: '.dt-layout-table', classToRemove: 'row mt-2' },
{ selector: '.dt-layout-end', classToAdd: 'mt-0' },
{ selector: '.dt-layout-end .dt-search', classToAdd: 'mt-0 mt-md-6' },
{ selector: '.dt-layout-full', classToRemove: 'col-md col-12', classToAdd: 'table-responsive' }
];
// Delete record
elementsToModify.forEach(({ selector, classToRemove, classToAdd }) => {
document.querySelectorAll(selector).forEach(element => {
if (classToRemove) {
classToRemove.split(' ').forEach(className => element.classList.remove(className));
}
if (classToAdd) {
classToAdd.split(' ').forEach(className => element.classList.add(className));
}
});
});
}, 100);
});