Hide initially all table rows before the visitor uses a column filter
In case you want to hide all the table rows before the visitor selects a column filter, you can use the code presented in this tutorial. Note that this will affect all tables, so if you want to apply this to a specific table use the table id in the jQuery selector.
function customFnDrawCallback(table_id, oTable) {
var filters = [];
source_datatable_id = 0;
table_found = false;
show_table = false;
filters_found = false;
filters_init = false;
var class_name = 'tabtable-rs_imxdpwua_1'; /* update the class name with your own */
if (jQuery('table.'+class_name+' tr.tabsearch_row').length) {
table_found = true;
filters_found = true;
jQuery('#' + table_id + ' input[name^="tab_search_col_"]').each(function() {
var filter_value = this.value;
if (filter_value != '') show_table = true;
console.log("Show table - input");
});
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 && (filter_value != '')) {
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) {
show_table = true;
}
});
};
if (table_found) {
if (!show_table && filters_found) {
jQuery('#' + table_id + ' tbody').hide();
} else {
jQuery('#' + table_id + ' tbody').show();
}
}
}
The best place to save this code is in the fnDrawCallback.js file, which should be placed under the following directories based on your CMS platform:
{joomla root directory}/components/com_tabulizer/assets/js/custom/fnDrawCallback.js
or ...
{wordpress root directory}/wp-content/plugins/tabulizer/site/assets/js/custom/fnDrawCallback.js