I was working with a html table where I need to filter two things. One is there is a table with data and when we click on column header and a filter grid will be displayed in which we can see a textbox and below that there are check boxes. I am looking a solution like when we type on the textbox, the checkboxes will filtered by the text input and after that click on OK button the table will be filtered.
[![Filter table grid](https://i.sstatic.net/EDCLRm5Z.png)](https://i.sstatic.net/EDCLRm5Z.png)
Code is like shown below
@page
@model IndexModel
@{
ViewData["Title"] = "Home page";
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<style>
table {
margin: 0 auto;
margin-top: 20px;
width: 100%;
position: relative;
overflow: auto;
overflow-y: overlay;
}
th,
thead {
position: sticky;
top: 0;
border: 1px solid #dddddd;
background-color: #1f2d54;
text-align: center;
color: white;
table-layout: fixed;
word-break: break-word;
height: 45px;
}
.filter {
position: absolute;
width: 20vw;
height: 40vh;
display: none;
text-align: left;
font-size: small;
z-index: 9999;
overflow: auto;
background: #ffffff;
color: #1f2d54;
border: 1px solid #dddddd;
}
.filter input {
margin: 5px !important;
padding: 0 !important;
width: 10%;
}
input.largerCheckbox {
margin: 5px;
padding: 0;
width: 13px;
height: 13px;
}
input[type='checkbox'] {
vertical-align: middle;
position: relative;
bottom: 1px;
}
<table style='padding: 8px;'>
<tr>
<th index=0>
Email
<div class="filter"></div>
</th>
<th index=1>
Name
<div class="filter"></div>
</th>
<th index=2>
Level
<div class="filter"></div>
</th>
<th index=3>
Location
<div class="filter"></div>
</th>
</tr>
<tr>
<td>Email 1</td>
<td>Name 1</td>
<td>Level 1</td>
<td>Location 2</td>
</tr>
<tr>
<td>Email 1</td>
<td>Name 1</td>
<td>Level 1</td>
<td>Location 1</td>
</tr>
<tr>
<td>Email 2</td>
<td>Name 1</td>
<td>Level 2</td>
<td>Location 1</td>
</tr>
<tr>
<td>Email 3</td>
<td>Name 2</td>
<td>Level 2</td>
<td>Location 1</td>
</tr>
<tr>
<td>Email 3</td>
<td>Name 3</td>
<td>Level 1</td>
<td>Location 2</td>
</tr>
<tr>
<td>Email 1</td>
<td>Name 2</td>
<td>Level 2</td>
<td>Location 1</td>
</tr>
<script>
$(document).ready(function () {
$("table th").click(function () {
showFilterOption(this);
});
});
var arrayMap = {};
function showFilterOption(tdObject) {
var filterGrid = $(tdObject).find(".filter");
if (filterGrid.is(":visible")) {
filterGrid.hide();
return;
}
$(".filter").hide();
var index = 0;
filterGrid.empty();
var allSelected = true;
filterGrid.append('<div><input id="searchtext" type="text" placeholder="Search" style="width: 70% !important"></div>');
filterGrid.append('<div><input id="all" type="checkbox" style="width: 10% !important" checked>All</div>');
var $rows = $(tdObject).parents("table").find("tr");
var values = [];
$rows.each(function(ind, ele)
{
if (ind > 0)
{
var currentTd = $(ele).children()[$(tdObject).attr("index")];
if (!values.includes(currentTd.innerHTML))
{
values.push(currentTd.innerHTML);
var div = document.createElement("div");
div.classList.add("grid-item");
var str = $(ele).is(":visible") ? "checked" : "";
if ($(ele).is(":hidden"))
{
allSelected = false;
}
div.innerHTML = '<br><input type="checkbox" ' + str + " >" + currentTd.innerHTML;
filterGrid.append(div);
arrayMap[index] = ele;
index++;
}
}
});
if (!allSelected) {
filterGrid.find("#all").removeAttr("checked");
}
filterGrid.append('<div style="text-align: center"><input id="close" type="button" value="Close" style="width: 40%"/><input id="ok" type="button" value="Ok" style="width: 40%"/></div>');
filterGrid.show();
var $stxt = filterGrid.find("input[type='text']");
var $closeBtn = filterGrid.find("#close");
var $okBtn = filterGrid.find("#ok");
var $checkElems = filterGrid.find("input[type='checkbox']");
var $gridItems = filterGrid.find(".grid-item");
var $all = filterGrid.find("#all");
$closeBtn.click(function () {
filterGrid.hide();
return false;
});
$("#searchtext").on('input', function () {
});
$okBtn.click(function () {
filterGrid.find(".grid-item").each(function (ind, ele) {
if ($(ele).find("input").is(":checked")) {
$(arrayMap[ind]).show();
}
else {
$(arrayMap[ind]).hide();
}
});
filterGrid.hide();
return false;
});
$checkElems.click(function (event) {
event.stopPropagation();
});
$gridItems.click(function (event) {
var chk = $(this).find("input[type='checkbox']");
$(chk).prop("checked", !$(chk).is(":checked"));
});
$all.change(function () {
var chked = $(this).is(":checked");
filterGrid.find(".grid-item [type='checkbox']").prop("checked", chked);
});
filterGrid.click(function (event) {
event.stopPropagation();
});
return filterGrid;
}
</script>
New contributor
1