Filter: Work across multiple tables

[liamgibbs]

Good morning, everyone. I'm just wondering if anyone has gotten the filter tool (https://wet-boew.github.io/wet-boew/demos/filter/filter-en.html) to work across multiple tables? I've tried a number of ways, but I can get it to work on a single table, just not across multiple tables. Any ideas?

[ghost]

There is no way to do this by default. You have to override the default function in wet. Be something like:

// FILTERS
<form class="wb-tables-filter" data-bind-to="dataset-filter">...</form> // WELL USE data-bind-to FOR THE ID

// TABLES (MUST HAVE DIFFERENT IDS, SINCE WHERE USING CONTAINS JUST ADD A NUMBER TO END OF THE CONTAINS STRING)
<table class="wb-tables table table-striped table-hover" id="dataset-filter1" aria-live="polite" data-wb-tables='{...}'>...</table>
<table class="wb-tables table table-striped table-hover" id="dataset-filter2" aria-live="polite" data-wb-tables='{...}'>...</table>

// CUSTOM SCRIPT (EITHER AT BOTTOM OF PAGE OR IN FILE LINKED AT BOTTOM OF PAGE (UNDER WET SCRIPTS))
<script>
$( document ).on( "submit", ".wb-tables-filter", function( event ) {

event.preventDefault();

var $form = $( this );
$( "table[id*='" + $form.data( "bind-to" ) + "']" ).each(function() { // THIS IS THE MAJOR DIFFERENCE (WELL LOOP ALL TABLES CONTAINING A SPECIFIC ID)
var $datatable = $( this ).dataTable( { "retrieve": true } ).api();

// Lets reset the search;
$datatable.search( "" ).columns().search( "" );

// Lets loop throug all options
var $lastColumn = -1, $cbVal = "";
$form.find( "[name]" ).each( function() {
var $elm = $( this ),
$value = "",
$regex = "",
$isAopts = $elm.data( "aopts" ),
$column = parseInt( $elm.attr( "data-column" ), 10 );

// Ignore the advanced options fields
if ( $isAopts ) {
return;
}

// Filters based on input type
if ( $elm.is( "select" ) ) {
$value = $elm.find( "option:selected" ).val();
} else if ( $elm.is( ":checkbox" ) ) {

// Verifies if using same checkbox list
if ( $column !== $lastColumn || $lastColumn === -1 ) {
$cbVal = "";
}
$lastColumn = $column;

// Verifies if checkbox is checked before setting value
if ( $elm.is( ":checked" ) ) {
var $aoptsSelector = "[data-aopts*='\"column\": \"" + $column + "\"']:checked",
$aopts = $( $aoptsSelector ),
$aoType = ( $aopts && $aopts.data( "aopts" ) ) ? $aopts.data( "aopts" ).type.toLowerCase() : "";

if ( $aoType === "both" ) {
$cbVal += "(?=.*\\b" + $elm.val() + "\\b)";
} else {
$cbVal += ( $cbVal.length > 0 ) ? "|" : "";
$cbVal += $elm.val();
}

$value = $cbVal;
$value = $value.replace( /\s/g, "\\s*" );

// Adjust regex based on advanced options
switch ( $aoType ) {
case "both":
$regex = "(" + $value + ").*";
break;
case "either":
$regex = "^(" + $value + ")$";
break;
case "and":
$regex = ( $value.indexOf( "|" ) > -1 ) ? "^(" + $value + "|[,\\s])(" + $value + "|[,\\s])+$" : "(" + $value + ")";
break;
case "any":
default:
$regex = "(" + $value + ")";
break;
}
}
} else {
$value = $elm.val();
}

if ( $value ) {

// Verifies if regex was preset, if not preset use 'contains value' as default
if ( !$regex ) {
$value = $value.replace( /\s/g, "\\s*" );
$regex = "(" + $value + ")";
}

$datatable.column( $column ).search( $regex, true ).draw();
}
} );
});

return false;
} );
</script>