Synchronize filter values between multiple tables on the same page

In case you want to synchronize the filter values for multiple tables placed on the same page, you can use the code presented in this tutorial. The idea is that when a filter value changes in one table, a corresponding change takes place automatically in other tables as well.

You should place this javascript code in the following file depending on your CMS version:

CMSFile Path
Joomla  {joomla root directory}/components/com_tabulizer/assets/js/custom/fnDrawCallback.js
Wordpress  {wordpress root directory}/wp-content/plugins/tabulizer/site/assets/js/custom/fnDrawCallback.js

Here is the code:

var g_update = false;   
               
function syncTabulizerfilters(filters,source_datatable_id) {
     g_update = true;
    // sanity checks
    if (!(filters instanceof Array)) return;
    if (filters.length==0) return;
    // update each table accordingly
    for (var i=0;i<tabulizer_datatables.length;i++) {
        if (i==source_datatable_id) continue;
        var oTable = tabulizer_datatables[i];
        filters.forEach( function (filterItem) {
            var filter_value = filterItem.value;
            var filter_index = filterItem.column_index;
            var filter_type = filterItem.control_type;           
            oTable.fnFilter( filter_value, filter_index );
            if (filter_type == 'select') {
                jQuery('select[name^="tab_search_col_'+i+'_'+filter_index+'"] option[value="'+filter_value+'"]').attr("selected","selected");
            }
        });               
    }
    g_update = false;
}       

function customFnDrawCallback(table_id, oTable) {   
    if (g_update) return;
    filters = [];
    source_datatable_id = 0;
    jQuery('#'+table_id+' select[name^="tab_search_col_"]').each(function () {
        var filter_value = this.value;
        var filter_name = this.name;       
        var patt = /tab_search_col_(\d+)_(\d+)/;           
        var res = patt.exec(filter_name);
        if (res) {           
            source_datatable_id = parseInt(res[1]);
            var column_index = parseInt(res[2]);                   
            filters.push({value: filter_value, column_index: column_index, control_type: "select"});
        }       
    });
    if (filters.length>0) {
        g_tdt_filters = filters;
        g_tdt_id = source_datatable_id;       
        syncTabulizerfilters(filters, source_datatable_id);
    }   
}