Hi @RAVI,
You can try to use Yet Another DataTables Column Filter - (yadcf) - (yadcf), which provides one feature: cumulative filtering.
https://github.com/vedmack/yadcf?tab=readme-ov-file
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
<script src="https://code.jquery.com/jquery-1.11.3.min.js"></script>
<link href="https://nightly.datatables.net/css/jquery.dataTables.css" rel="stylesheet" type="text/css" />
<link href="https://cdnjs.cloudflare.com/ajax/libs/yadcf/0.9.4-beta.13/jquery.dataTables.yadcf.css" rel="stylesheet" type="text/css" />
<script src="https://nightly.datatables.net/js/jquery.dataTables.js"></script>
<!-- Select2 plugin -->
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.3/css/select2.min.css" />
<!-- Select2 plugin -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.3/js/select2.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/yadcf/0.9.4-beta.13/jquery.dataTables.yadcf.min.js"></script>
<script>
$(document).ready(function () {
var oTable;
oTable = $('#list').DataTable();
yadcf.init(oTable,
[
{
column_number: 1,
filter_type: "multi_select",
select_type: 'select2',
cumulative_filtering: false
},
{
column_number: 2,
filter_type: "multi_select",
select_type: 'select2'
},
{
column_number: 3,
filter_type: "multi_select",
select_type: 'select2',
}
],
{
cumulative_filtering: true
}
);
});
</script>
</head>
<body>
<form id="form1" runat="server">
<div>
<div id="c1" runat="server">
<table cellspacing="0" class="myClass" id="list" style="width: 1400px; font-family: Calibri; font-size: 11px; border-collapse: collapse; border: 1px solid black; z-index: 102;">
<thead>
<tr>
<th style="width: 60px; text-align: center;">F1</th>
<th style="width: 110px; text-align: center;">F2</th>
<th style="width: 150px; text-align: center;">F3</th>
<th style="width: 40px; text-align: center;">F4</th>
<th style="width: 40px; text-align: center;">F5</th>
</tr>
</thead>
<tbody style="border-collapse: collapse; border: 1px solid black;">
<asp:Repeater ID="Repeater1" runat="server">
<ItemTemplate>
<tr onmouseover="this.style.backgroundColor='#DFE7E5'" onmouseout="this.style.backgroundColor=''">
<td style="text-align: center; border-collapse: collapse; border: 1px solid black; font-size: larger;"><%#Eval("F1")%></td>
<td style="text-align: center; border-collapse: collapse; border: 1px solid black; font-size: larger;"><%#Eval("F2")%></td>
<td style="text-align: center; border-collapse: collapse; border: 1px solid black; font-size: larger;"><%#Eval("F3")%></td>
<td style="text-align: right; border-collapse: collapse; border: 1px solid black; font-size: larger;"><%#Eval("F4")%></td>
<td style="text-align: right; border-collapse: collapse; border: 1px solid black; font-size: larger;"><%#Eval("F5")%></td>
</tr>
</ItemTemplate>
</asp:Repeater>
</tbody>
<tfoot>
<tr>
<td style="background: sandybrown; border: 1px solid black;"></td>
<td style="background: sandybrown; border: 1px solid black;"></td>
<td style="text-align: right; border-collapse: collapse; background: sandybrown; border: 1px solid black; font-size: larger; font-weight: bold; font-size: 20px;"></td>
<td style="text-align: right; border-collapse: collapse; background: sandybrown; border: 1px solid black; font-size: larger; font-weight: bold; font-size: 20px;"></td>
<td style="background: sandybrown; border: 1px solid black;"></td>
</tr>
</tfoot>
</table>
</div>
</div>
</form>
</body>
</html>
Best regards,
Lan Huang
If the answer is the right solution, please click "Accept Answer" and kindly upvote it. If you have extra questions about this answer, please click "Comment".
Note: Please follow the steps in our documentation to enable e-mail notifications if you want to receive the related email notification for this thread.