`;
},
},
action: {
title: '',
render: (item) => {
return `
`;
},
createdCell: (cell, cellData, rowData) => {
cell.querySelector('.btn').addEventListener('click', () => {
alert(`Clicked on action button for row ${rowData.user.name}`);
});
},
},
},
};
}
/**
* Creates a map of filter elements based on the data-datatable-filter-column attribute.
*
* @return {Map} A map of filter elements, where the key is the value of the data-datatable-filter-column attribute and the value is the corresponding HTMLSelectElement.
*/
createFilterMap() {
const filterElements = document.querySelectorAll(
'select[data-datatable-filter-column]'
);
return new Map(
Array.from(filterElements).map((el) => [
el.getAttribute('data-datatable-filter-column'),
el,
])
);
}
/**
* Initialize the filters based on the state and map the filter elements to their corresponding datatable columns.
*/
initializeFilters() {
this.dataTable.getState().filters.forEach(({ column, value }) => {
if (this.filterMap.has(column)) {
const filterEl = this.filterMap.get(column);
if (filterEl !== null) {
filterEl.value = value || '';
}
}
});
this.filterMap.forEach((el, column) => {
el.addEventListener('change', () => {
this.dataTable
.setFilter({
column,
type: 'text',
value: el.value || '',
})
.redraw();
});
});
}
/**
* A debounced function that delays invoking the input function until after wait milliseconds have elapsed since the last time the debounced function is invoked.
*
* @param {Function} func - The function to debounce.
* @param {number} wait - The number of milliseconds to delay.
* @return {Function} The debounced function.
*/
debounce(func, wait) {
let timeout;
return function (...args) {
const context = this;
clearTimeout(timeout);
timeout = setTimeout(() => func.apply(context, args), wait);
};
}
/**
* Initializes the search functionality for the current table.
* It sets up a debounced search event listener on the search element
* to perform a search on the datatable whenever the user types in the search input.
*
* @return {void}
*/
initSearch() {
const searchElement = document.querySelector('[data-datatable-search="true"]');
if (this.dataTable && searchElement) {
const debouncedSearch = this.debounce(() => {
this.dataTable.search(searchElement.value);
}, 300);
searchElement.addEventListener('keyup', debouncedSearch);
}
}
/**
* Creates a new instance of DataTableManager with the specified tableElement and apiUrl.
* Initializes filters and search functionality for the instance.
*
* @param {void}
* @return {void}
*/
static createInstance() {
const apiUrl = DataTableManager.isLocalhost()
? 'http://127.0.0.1:8001/metronic-tailwind-html/demo1/account/security/current-sessions/_data.html'
: 'https://keenthemes.com/metronic/tailwind/demo1/account/security/current-sessions/_data.html';
const tableElement = document.querySelector('#current_sessions_table');
const dataTableManager = new DataTableManager(tableElement, apiUrl);
dataTableManager.initializeFilters();
dataTableManager.initSearch();
}
}
KTDom.ready(() => {
DataTableManager.createInstance();
});