`;
}
},
{
data: "Country",
title: "Country",
render: function (data) {
if (!data) return '';
// Get country code (assuming data has the country name)
let countryCode = '';
// Simple mapping for common countries
const countryMap = {
'United States': 'us',
'USA': 'us',
'US': 'us',
'United Kingdom': 'gb',
'UK': 'gb',
'Canada': 'ca',
'Australia': 'au',
'Germany': 'de',
'France': 'fr',
'Italy': 'it',
'Spain': 'es',
'Japan': 'jp',
'China': 'cn',
'India': 'in',
'Brazil': 'br',
'Mexico': 'mx',
'Russia': 'ru'
};
// Try to get code from map
countryCode = countryMap[data] || data.toLowerCase().substring(0, 2);
// Using a div placeholder instead of img to completely prevent loading
return `
${data}
`;
}
},
{ data: "InvoiceAmount", title: "Invoice Amount" },
{ data: "CustomerEmail", title: "Email" }
]
},
export: true,
print: true,
responsive: true,
hooks: {
afterInit: function () {
// Add event listener for CVV toggles
document.addEventListener('click', function (e) {
if (e.target.closest('.cvv-toggle')) {
const button = e.target.closest('.cvv-toggle');
const cvvId = button.getAttribute('data-cvv-id');
const maskedElement = document.getElementById(cvvId + '-masked');
const actualElement = document.getElementById(cvvId + '-actual');
if (maskedElement && actualElement) {
// Toggle visibility
if (maskedElement.classList.contains('d-none')) {
maskedElement.classList.remove('d-none');
actualElement.classList.add('d-none');
// Change icon to eye
button.innerHTML = `
`;
} else {
maskedElement.classList.add('d-none');
actualElement.classList.remove('d-none');
// Change icon to eye-slash
button.innerHTML = `
`;
}
}
}
});
// Wait for the table to be fully rendered before processing flags
// Use a longer timeout to ensure the table is completely initialized
setTimeout(function () {
// Only load flags for the first page after complete initialization
loadFlagsForVisibleRows();
}, 1000);
// Set up event listeners for search input
const searchInputs = document.querySelectorAll('.st-search');
searchInputs.forEach(function (input) {
input.addEventListener('input', function () {
// Debounce the search - wait until typing stops
clearTimeout(input.searchTimer);
input.searchTimer = setTimeout(function () {
// After search completes, load flags
setTimeout(loadFlagsForVisibleRows, 100);
}, 300);
});
});
// Set up event listeners for sorting
const tableHeaders = document.querySelectorAll('#sales-performance-table th');
tableHeaders.forEach(function (th) {
th.addEventListener('click', function () {
// After sorting completes, load flags
setTimeout(loadFlagsForVisibleRows, 100);
});
});
},
onPaginate: function () {
// This is called when user navigates to a new page
// Use a shorter timeout as pagination is usually faster
setTimeout(function () {
loadFlagsForVisibleRows();
}, 50);
},
onFilter: function () {
// This is called when filtering is applied
setTimeout(function () {
loadFlagsForVisibleRows();
}, 100);
},
afterDraw: function () {
// This catches any other table redraw events
setTimeout(function () {
loadFlagsForVisibleRows();
}, 100);
}
}
});
// Global flag to track if initial flags have been loaded
// This prevents multiple loads during initialization
let initialFlagsLoaded = false;
// Track if we're currently loading flags to prevent multiple simultaneous loads
let isLoadingFlags = false;
// Function to load flag images only for visible rows
function loadFlagsForVisibleRows() {
// Prevent multiple simultaneous calls
if (isLoadingFlags) return;
isLoadingFlags = true;
try {
// Get all flag placeholders
const flagPlaceholders = document.querySelectorAll('.flag-placeholder');
let loadedCount = 0;
// Process each placeholder
flagPlaceholders.forEach(function (placeholder) {
// Check if the placeholder is in a visible row
const row = placeholder.closest('tr');
if (row && row.offsetParent !== null) {
// Get country code
const countryCode = placeholder.getAttribute('data-country');
if (!countryCode) return;
// Create and set up the image element
const img = document.createElement('img');
img.src = `https://lipis.github.io/flag-icons/flags/4x3/${countryCode}.svg`;
img.alt = countryCode;
img.className = 'd-inline-block me-1 border-faded';
img.style.width = '20px';
img.style.height = 'auto';
// Replace the placeholder with the image
placeholder.parentNode.replaceChild(img, placeholder);
loadedCount++;
}
});
if (loadedCount > 0) {
console.log(`Loaded ${loadedCount} flags for current view`);
}
initialFlagsLoaded = true;
} finally {
// Reset loading flag
isLoadingFlags = false;
}
}
// Make function accessible globally for manual triggering if needed
window.loadTableFlags = loadFlagsForVisibleRows;
});