I designed a html bar which is better suited to the project am currently working on and would like to integrate it with wpdatatables, the built in filter for the plugin does not meet the standard which i want.
below is the code filter bar.
My approach here is to filter multiple tables and charts with the same filter.
I have looked up their documentation but could not find anything that could help me as regards this.
<head>
</head>
<body>
<div class="combined-bar">
<div class="rxsearch-section">
<div class="rxsearch-icon" id="searchIcon">
</div>
<input type="text" class="rxsearch-input" id="searchInput" placeholder="Search..." onfocus="expandSearchInput()"
onblur="shrinkSearchInput()">
</div>
<button class="rxfilter-button" onclick="toggleFilterPopup()">
<span class="rxfilter-text">Filters</span>
</button>
<div class="filter-popup-wrapper" id="filterPopupWrapper" onclick="closeFilterPopup(event)">
<div class="filter-popup" id="filterPopup">
<div class="rxfilter-popup-header">
<h3>Filter</h3>
<span class="close-button" onclick="toggleFilterPopup()">×</span>
</div>
<div class="rxcategory-toggle-buttons">
<div class="toggle-switch" id="toggleSwitch" onclick="toggleCategory()">
<div class="toggle"></div>
<div class="moption">Options</div>
<div class="moption">Year</div>
</div>
</div>
<div class="filter-popup-content">
<div class="category options show" id="optionsCategory">
<!-- Options will be dynamically inserted here -->
</div>
<div class="category" id="yearCategory">
<div class="moption">
<input type="radio" id="year1" name="year" value="2024" checked>
<label for="year1">2024</label>
</div>
<div class="moption">
<input type="radio" id="year2" name="year" value="2023">
<label for="year2">2023</label>
</div>
<div class="moption">
<input type="radio" id="year3" name="year" value="2022">
<label for="year3">2022</label>
</div>
</div>
</div>
<div class="button-group">
<button class="apply-button" onclick="applyFilters()">
Apply filter
</button>
<button class="clear-button" onclick="clearFilters()">
<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" fill="currentColor"
Clear filter
</button>
</div>
</div>
</div>
<div class="rxoptions-section">
<div class="option active" id="Submissions">Submissions</div>
<div class="option" id="Actors">Actors</div>
<div class="option" id="Victims">Victims</div>
<div class="option" id="Issues">Issues</div>
</div>
<script>
function expandSearchInput() {
document.getElementById('searchIcon').style.opacity = '0';
document.getElementById('searchIcon').style.width = '0';
document.getElementById('searchInput').style.flexGrow = '1.2';
}
function shrinkSearchInput() {
if (document.getElementById('searchInput').value === '') {
document.getElementById('searchIcon').style.opacity = '1';
document.getElementById('searchIcon').style.width = '20px';
document.getElementById('searchInput').style.flexGrow = '1';
}
}
document.addEventListener('DOMContentLoaded', function () {
const options = document.querySelectorAll('.option');
const clearIconButton = document.getElementById('clearIconButton');
let activeOptionId = null;
options.forEach(option => {
option.addEventListener('click', () => {
options.forEach(opt => opt.classList.remove('active'));
document.querySelectorAll('div[id$="-content"]').forEach(content => content.style.display = 'none');
option.classList.add('active');
activeOptionId = option.id;
const contentDiv = document.getElementById(option.id + '-content');
if (contentDiv) {
contentDiv.style.display = 'block';
} else {
console.warn('Content div not found for option:', option.id);
}
clearIconButton.style.display = 'none';
});
});
document.getElementById('optionsCategory').classList.add('show');
clearIconButton.style.display = 'none';
clearIconButton.addEventListener('click', clearFilters);
const defaultActiveOption = document.querySelector('.option.active');
if (defaultActiveOption) {
activeOptionId = defaultActiveOption.id;
}
});
let filtersSelected = false;
function toggleFilterPopup() {
const filterPopupWrapper = document.getElementById('filterPopupWrapper');
filterPopupWrapper.classList.toggle('show');
}
function closeFilterPopup(event) {
if (event.target.id === 'filterPopupWrapper') {
toggleFilterPopup();
}
}
function clearFilters() {
document.getElementById('year1').checked = true;
document.querySelectorAll('.filter-popup-content input[type="checkbox"]').forEach(el => el.checked = false);
filtersSelected = false;
updateClearIconButton();
}
function applyFilters() {
const checkboxes = document.querySelectorAll('.filter-popup-content input[type="checkbox"]');
const radios = document.querySelectorAll('.filter-popup-content input[type="radio"]');
filtersSelected = Array.from(checkboxes).some(checkbox => checkbox.checked) || Array.from(radios).some(radio => radio.checked);
updateClearIconButton();
toggleFilterPopup();
}
function toggleCategory() {
const toggleSwitch = document.getElementById('toggleSwitch');
const optionsCategory = document.getElementById('optionsCategory');
const yearCategory = document.getElementById('yearCategory');
toggleSwitch.classList.toggle('active');
optionsCategory.classList.toggle('show');
yearCategory.classList.toggle('show');
if (optionsCategory.classList.contains('show') && activeOptionId) {
const activeOption = document.getElementById(activeOptionId);
if (activeOption) {
activeOption.classList.add('active');
const contentDiv = document.getElementById(activeOptionId + '-content');
if (contentDiv) {
contentDiv.style.display = 'block';
}
}
}
}
document.addEventListener('DOMContentLoaded', function () {
const options = document.querySelectorAll('.option');
const optionsCategory = document.getElementById('optionsCategory');
const optionsData = {
Submissions: [
{ value: 'Total Submissions', label: 'Total Submissions' },
{ value: 'Pending Submissions', label: 'Pending Submissions' },
{ value: 'Approved Submissions', label: 'Approved Submissions' }
],
Actors: [
{ value: 'Actors', label: 'Actors' },
{ value: 'Activists', label: 'Activists' },
{ value: 'Executive', label: 'Executive' },
{ value: 'Judiciary', label: 'Judiciary' },
{ value: 'Legislature', label: 'Legislature' },
{ value: 'Media', label: 'Media' },
{ value: 'NGOs', label: 'NGOs' },
{ value: 'Non-state actors', label: 'Non-state actors' },
{ value: 'Other actors', label: 'Other actors' },
{ value: 'Other government agencies', label: 'Other government agencies' },
{ value: 'Politicians/political parties', label: 'Politicians/political parties' },
{ value: 'Public intellectuals/commentators', label: 'Public intellectuals/commentators' },
{ value: 'Security agencies', label: 'Security agencies' },
{ value: 'Vulnerable persons/groups', label: 'Vulnerable persons/groups' },
],
Victims: [
{ value: 'Activists', label: 'Activists' },
{ value: 'Executive', label: 'Executive' },
{ value: 'Judiciary', label: 'Judiciary' },
{ value: 'Legislature', label: 'Legislature' },
{ value: 'Media', label: 'Media' },
{ value: 'NGOs', label: 'NGOs' },
{ value: 'Non-state actors', label: 'Non-state actors' },
{ value: 'Other actors', label: 'Other actors' },
{ value: 'Other government agencies', label: 'Other government agencies' },
{ value: 'Politicians/political parties', label: 'Politicians/political parties' },
{ value: 'Public intellectuals/commentators', label: 'Public intellectuals/commentators' },
{ value: 'Security agencies', label: 'Security agencies' },
{ value: 'Vulnerable persons/groups', label: 'Vulnerable persons/groups' },
],
Issues: [
{ value: 'Social welfare/safety net', label: 'Social welfare/safety net' },
{ value: 'Blasphemy', label: 'Blasphemy' },
{ value: 'Cyber attack', label: 'Cyber attack' },
{ value: 'Protest', label: 'Protest' },
{ value: 'Attack', label: 'Attack' },
{ value: 'FOI', label: 'FOI' },
{ value: 'Judicial action', label: 'Judicial action' },
{ value: 'Internet/telecoms/social media shutdown', label: 'Internet/telecoms/social media shutdown' },
{ value: 'Cyber fraud', label: 'Cyber fraud' },
{ value: 'Cyberbullying', label: 'Cyberbullying' },
{ value: 'Censorship', label: 'Censorship' },
{ value: 'Regulation', label: 'Regulation' },
{ value: 'Arrest/detention/harassment', label: 'Arrest/detention/harassment' },
]
};
function updateOptions(selectedOption) {
optionsCategory.innerHTML = '';
const options = optionsData[selectedOption];
options.forEach(option => {
const optionElement = document.createElement('div');
optionElement.classList.add('moption');
optionElement.innerHTML = `
<input type="checkbox" name="filter" value="${option.value}" id="${option.value}">
<label for="${option.value}">${option.label}</label>
`;
optionsCategory.appendChild(optionElement);
});
clearIconButton.style.display = 'none';
}
options.forEach(moption => {
moption.addEventListener('click', function () {
document.querySelector('.option.active').classList.remove('active');
moption.classList.add('active');
updateOptions(moption.id);
});
});
updateOptions(document.querySelector('.option.active').id);
});
</script>
</body>
</html>```