'How to make a table filters with checkboxes and slider range?
i need to make a table with filters: two filters depends on checkboxes and one on slider range. Filters with checkboxes works fine, range too but they don't work together. I need help with that - how to combine checkbox filters with slider filter? How to combine below code to make it work together (checkboxes and slider-range as filters)?
var $filterCheckboxes = $('#filters input[type="checkbox"]');
$filterCheckboxes.on('click', function() {
$('.list__img').hide();
});
// Read All Available Filter Groups
var allFilters = [];
$filterCheckboxes.each(function() {
if ($.inArray(this.name,allFilters) == -1){
allFilters.push(this.name);
}
});
$filterCheckboxes.on('change', function() {
// create a collection containing all of the filterable elements
var $filteredResults = $('.list__item');
var $filterCategoryApplied = 0;
$.each(allFilters, function(arIndex, filterName) {
// console.log(filterName);
var $filterCheckboxCategory = $('#filters input[name='+filterName+']').filter(':checked');
console.log(filterName + ' length = ' + $filterCheckboxCategory.length);
if ( $filterCheckboxCategory.length === 0 ) {
// alert('none checked for ' + filterName);
$filteredResults = [];
}
});
console.log('start checking');
// Read Selectetd Filters
var selectedFilters = {};
$filterCheckboxes.filter(':checked').each(function() {
if (!selectedFilters.hasOwnProperty(this.name)) {
selectedFilters[this.name] = [];
}
selectedFilters[this.name].push(this.value);
});
// loop over the selected filter name -> (array) values pairs
$.each(selectedFilters, function(name, filterValues) {
// filter each .flower element
$filteredResults = $filteredResults.filter(function() {
var matched = false,
currentFilterValues = $(this).data('category').split(' ');
// loop over each category value in the current .flower's data-category
$.each(currentFilterValues, function(_, currentFilterValue) {
// if the current category exists in the selected filters array
// set matched to true, and stop looping. as we're ORing in each
// set of filters, we only need to match once
if ($.inArray(currentFilterValue, filterValues) != -1) {
matched = true;
return false;
}
});
// if matched is true the current .flower element is returned
return matched;
});
});
$('.list__item').hide().filter($filteredResults).show();
});
$( "#slider-range" ).slider({
range: true,
min: 34,
max: 105,
values: [ 34, 105 ],
slide: function( event, ui ) {
// in this function we can define what happens when a user changes the sliders
$( "#amount" ).val( ui.values[ 0 ] + " - " + ui.values[ 1 ] );
var table = document.getElementById("list");
for (var i = 1, row; row = table.rows[i]; i++) {
//iterate through rows (we SKIP the first row: counter starts at 1!)
for (var j = 0, col; col = row.cells[j]; j++) {
//iterate through columns: if first column not in range: HIDE, else SHOW
if (j == 3) {
let jTxt = $(col).find('.size-full').html();
let jDot = jTxt.toString().replace(/\,/g, '.');
let jRound = Math.round(jDot);
if (jRound >= ui.values[ 0 ] && jRound <= ui.values[ 1 ]) {
$(row).show();
} else {
$(row).hide();
}
}
}
}
}
});
$( "#amount" ).val($( "#slider-range" ).slider( "values", 0 ) +
" - " + $( "#slider-range" ).slider( "values", 1 ) );
Sources
This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.
Source: Stack Overflow
| Solution | Source |
|---|
