I have an HTML Table where I display various values, I need to filter by column in this table. I want to list values in column as checkbox in dropdown like in excel but I'm not used to JavaScript or jQuery. Here is my view;
@using Company.Models
@model IList<VWStockListModel>
@{
ViewBag.Title = "Active Stock List";
Layout = "~/Views/Shared/LeftBarV1.cshtml";
}
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<div class="row">
<div class="col-12">
<div class="card">
<div class="card-body">
<table id="example1" class="table table-bordered table-striped">
<thead>
<tr>
<th>
Warehouse Code
<input class="form-control" type="text" id="myInput0" onkeyup="myFunction(0)" placeholder="Search">
</th>
<th>
First Warehouse
<input class="form-control" type="text" id="myInput1" onkeyup="myFunction(1)" placeholder="Search">
</th>
<th>
Stock Name
<input class="form-control" type="text" id="myInput2" onkeyup="myFunction(2)" placeholder="Search">
</th>
<th>
Quality
<input class="form-control" type="text" id="myInput3" onkeyup="myFunction(3)" placeholder="Search">
</th>
<th>
Thickness
<input class="form-control" type="text" id="myInput4" onkeyup="myFunction(4)" placeholder="Search">
</th>
<th>
Width
<input class="form-control" type="text" id="myInput5" onkeyup="myFunction(5)" placeholder="Search">
</th>
<th>
Height
<input class="form-control" type="text" id="myInput6" onkeyup="myFunction(6)" placeholder="Search">
</th>
<th>
Tonnage
<input class="form-control" type="text" id="myInput7" onkeyup="myFunction(7)" placeholder="Search">
</th>
<th>
Ord Tonnage
<input class="form-control" type="text" id="myInput8" onkeyup="myFunction(8)" placeholder="Search">
</th>
<th>
Net Tonnage
<input class="form-control" type="text" id="myInput9" onkeyup="myFunction(9)" placeholder="Search">
</th>
<th>
Work Order Tonnage
<input class="form-control" type="text" id="myInput10" onkeyup="myFunction(10)" placeholder="Search">
</th>
<th>
Origin
<input class="form-control" type="text" id="myInput11" onkeyup="myFunction(11)" placeholder="Search">
</th>
<th>
Roll No
<input class="form-control" type="text" id="myInput12" onkeyup="myFunction(12)" placeholder="Search">
</th>
<th>
Price
<input class="form-control" type="text" id="myInput13" onkeyup="myFunction(13)" placeholder="Search">
</th>
<th>
Description
<input class="form-control" type="text" id="myInput14" onkeyup="myFunction(14)" placeholder="Search">
</th>
<th>
Op End Time
<input class="form-control" type="text" id="myInput15" onkeyup="myFunction(15)" placeholder="Search">
</th>
<th>
Group Code
<input class="form-control" type="text" id="myInput16" onkeyup="myFunction(16)" placeholder="Search">
</th>
</tr>
</thead>
<tbody>
@foreach (var x in Model)
{
<tr>
<td>@x.WarehouseCode</td>
<td>@x.FirstWarehouse</td>
<td>@x.StockName.Replace('Ý', 'İ').Replace('Þ', 'Ş').Replace('Ð', 'Ğ')</td>
<td>@x.Quality</td>
<td>@x.Thickness.ToString("N2")</td>
<td>@x.Width.ToString("N0")</td>
<td>@x.Height.ToString("N0")</td>
<td>@x.Tonnage.ToString("N0")</td>
<td>@x.OrdTonnage.ToString("N0")</td>
<td>@x.NetTonnage.ToString("N0")</td>
<td>@x.WorkOrdTonnage.ToString("N0")</td>
<td>@x.Origin</td>
<td>@x.RollNo</td>
<td style="text-align:right;">@x.Price.ToString("N2")</td>
<td>@x.Description</td>
<td>@x.OpEndTime</td>
<td>@x.GroupCode</td>
</tr>
}
</tbody>
</table>
</div>
<!-- /.card-body -->
</div>
<!-- /.card -->
</div>
<!-- /.col -->
</div>
It works with searching right now.
VWStockListModel;
public class VWSacStokListModel
{
public string StokName { get; set; }
public string GroupCode { get; set; }
public int WarehouseCode { get; set; }
public int FirstWarehouse { get; set; }
public string RollNo { get; set; }
public string Origin { get; set; }
public string Quality { get; set; }
public decimal Thickness { get; set; }
public decimal Width { get; set; }
public decimal Height { get; set; }
public decimal Tonnage { get; set; }
public decimal OrdTonnage { get; set; }
public decimal WorkOrdTonnage { get; set; }
public string OpEndTime { get; set; }
public string Descrpition { get; set; }
public decimal Price { get; set; }
public decimal NetTonnage{ get; set; }
}
Also here is the example of it from Excel; Excel Filtering
VWStockListModelmodel.