URL Table Filter Parameter Synchronization

Showcase
1

JavaScript to synchronize your filter tab selection with the URL parameter. This script will update the URL when a user selects a filter and restore the filter selection when the page reloads.

How It Works:

  1. Selects Filter Tabs: The script targets .filter-tabs .nav-tabs li to find the available filters.
  2. Updates the URL: When a user clicks a filter, it updates the URL parameter filter with the filter name.
  3. Restores Selection on Reload: When the page loads, it checks the URL for a filter parameter and activates the corresponding tab.
  4. Handles Active States: Ensures only the selected filter is marked as active.

/* CODE FOR URL Table Filter Parameter Synchronization */
(function(){
jQuery(document).ready(function() {
if(jQuery(‘.filter-tabs .nav-tabs li’).length === 0) return;

    const addFilterToUrl = (filterValue) => {
        const url = new URL(window.location.href);
        url.searchParams.delete('filter');
        url.searchParams.append('filter', filterValue);
        window.history.pushState({ path: url.href }, '', url.href);
    };

    jQuery('.filter-tabs .nav-tabs li').each(function(){
        const filterValue = jQuery(this).text().trim(); 
        const urlParams = new URLSearchParams(window.location.search);
        
        if(urlParams.has('filter')){
            const filterUrlValue = decodeURIComponent(urlParams.get('filter'));
            if(filterValue === filterUrlValue) {
                jQuery(this).addClass('active').siblings().removeClass('active');
            }
        } else {
            if(jQuery(this).hasClass('active')){
                addFilterToUrl(filterValue); 
            }
        }

        jQuery(this).on('click', function(){
            addFilterToUrl(filterValue);
        });
    });
});

})();
/* CODE FOR URL Table Filter Parameter Synchronization */