Hi @RAVI,
multi filter to apply only two columns Field1 and Field2
Write examples based on your needs for your reference. Only two columns are needed to implement filtering, just define columns([0, 1]).
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title>Untitled Page</title>
<script type="text/javascript" src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
<script type="text/javascript" src="https://cdn.datatables.net/1.13.7/js/jquery.dataTables.min.js"></script>
<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/1.13.7/css/jquery.dataTables.min.css" />
<script type="text/javascript">
$(document).ready(function () {
var rowCount = $('table#list tbody tr').length;
sessionStorage.setItem("rowCount", rowCount);
// Remove the formatting to get integer data for summation
var intVal = function (i) {
return typeof i === 'string' ?
i.replace(/[\$,]/g, '') * 1 :
typeof i === 'number' ?
i : 0;
};
$('#list').DataTable({
initComplete: function () {
this.api().columns([0, 1]).every(function () {
var column = this;
var colTitle = this.header().innerHTML;
var select = $('<select><option value="">' + colTitle + '</option></select>')
.appendTo($(column.header()).empty())
.on('change', function () {
var val = $.fn.dataTable.util.escapeRegex(
$(this).val()
);
column
.search(val ? '^' + val + '$' : '', true, false)
.draw();
});
column.data().unique().sort().each(function (d, j) {
select.append('<option value="' + d + '">' + d + '</option>')
});
});
},
footerCallback: function (tfoot, data, start, end, display) {
let api = this.api();
api.column(2).footer().innerHTML = "Grand total";
// Total over all pages
total = api
.column(3, { search: 'applied' })
.data()
.reduce((a, b) => intVal(a) + intVal(b), 0);
// Update footer
api.column(3).footer().innerHTML = total;
}
});
});
</script>
</head>
<body>
<div class="container">
<table cellspacing="0" class="myClass" id="list" style="width: 500px; font-family: Calibri; font-size: 11px; border-collapse: collapse; border: 1px solid black;">
<thead>
<tr>
<th>Field1</th>
<th>Field2</th>
<th>Field3</th>
<th>Field4</th>
</tr>
</thead>
<tbody style="border-collapse: collapse; border: 1px solid black;">
<asp:Repeater ID="Repeater1" runat="server">
<ItemTemplate>
<tr>
<td style="border-collapse: collapse; border: 1px solid black; font-size: larger;"><%#Eval("Field1")%></td>
<td style="border-collapse: collapse; border: 1px solid black; font-size: larger;"><%#Eval("Field2")%></td>
<td style="border-collapse: collapse; border: 1px solid black; font-size: larger;"><%#Eval("Field3")%></td>
<td style="border-collapse: collapse; border: 1px solid black; font-size: larger;"><%#Eval("Field4")%></td>
</tr>
</ItemTemplate>
</asp:Repeater>
</tbody>
<tfoot>
<tr>
<td></td>
<td></td>
<td style="border-collapse: collapse; background: sandybrown; border: 1px solid black; font-size: larger; font-weight: bold;"></td>
<td style="border-collapse: collapse; background: sandybrown; border: 1px solid black; font-size: larger; font-weight: bold;"></td>
</tr>
</tfoot>
</table>
</div>
</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.