Объеденение двух фильтров JavaScript
На Js работает два фильтра для html таблицы. Первый:
$(function() {
//name part
$("#name").on("keyup", function() {
var value = $(this).val().toLowerCase();
$("#my-table").find('tr').filter(function() {
$(this).toggle($(this).find('td').text().toLowerCase().indexOf(value) > -1)
});
});
$("#from,#to").bind('keyup change', function() {
var val1 = moment($('#from').val().toLowerCase(), 'DD.MM.YYYY');
var val2 = moment($('#to').val().toLowerCase(), 'DD.MM.YYYY');
$("#my-table").find('tr').filter(function() {
$(this).toggle((moment($(this).find('td').text().toLowerCase(),
'DD.MM.YYYY') >= (val1) || !val1["_isValid"]) && (moment($(this).find('td').text()
.toLowerCase(),
'DD.MM.YYYY') <= (val2) || !val2["_isValid"]))
});
//console.log(val1["_isValid"], val2["_isValid"]);
})
});
Второй:
function filter_type(box) {
var cbs = document.getElementsByTagName('input');
var all_checked_types = [];
for(var i=0; i < cbs.length; i++) {
if(cbs[i].type == "checkbox") {
if(cbs[i].name.match(/^filter/)) {
if(cbs[i].checked) {
all_checked_types.push(cbs[i].value);
}
}
}
}
if (all_checked_types.length > 0) {
$('#my-table tr').each(function (i, row) {
var $tds = $(this).find('td')
if ($tds.length) {
var type = $tds[2].innerText;
console.log(type)
if(!(type && all_checked_types.indexOf(type) >= 0)) {
$(this).hide();
}
else {
$(this).show();
}
}
});
}
else {
$('#my-table tr').each(function (i, row) {
var $tds = $(this).find('td'),
type = $tds.eq(2).text();
$(this).show();
});
}
return true;
}
Проблема заключается в том, что фильтрация происходит по последнему измененному фильтру. HTML:
<div class="container">
Фильтр даты от: <input class="form-control" id="from" type="text"> до : <input class="form-control" id="to" type="text">
<input class="form-control" id="name" type="text" placeholder="Поиск по ключевому слову">
<table>
<tr><td><input type='checkbox' onclick='return filter_type(this);' name='filter' id="Р1" value="Рецепт 1" />Рецепт 1"</td></tr>
<tr><td><input type='checkbox' onclick='return filter_type(this);' name='filter' id="Р2" value="Рецепт 2" />Рецепт 2</td></tr>
<tr><td><input type='checkbox' onclick='return filter_type(this);' name='filter' id="Р3" value="Рецепт 3" />Рецепт 3</td></tr>
</table>
<table>
<thead>
<tr><th onclick="sortTable(0)">Дата</th><th onclick="sortTable(1)"">Время</th><th onclick="sortTable(2)">Наименование рецепта</th><th onclick="sortTable(3)">Состояние</th><th onclick="sortTable(4)">Время наработки</th></tr>
</thead>
<tbody id="my-table" >
<tr class="list-group"><td>06.01.2023</td><td>8:49:55</td><td>Рецепт 1</td><td>Включен</td><td>1</td></tr>
<tr class="list-group"><td>06.01.2022</td><td>8:49:55</td><td>Рецепт 2</td><td>Включен</td><td>2</td></tr>
<tr class="list-group"><td>06.01.2021</td><td>8:49:55</td><td>Рецепт 3</td><td>Включен</td><td>3</td></tr>
</tbody>
</table>
</div>
Необходимо, что бы фильтрация происходила одновременно по двум фильтрам.