Hello
This is my aspx page
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="A.aspx.cs" Inherits="Default3" %>
<html>
<head runat="server">
<title>demo</title>
<script type="text/javascript" src="jquery-3.2.1.min.js"></script>
<script type="text/javascript" src="dt.js"></script>
<script type="text/javascript" src="jquerya.js"></script>
<script type="text/javascript" src="jqueryb.js"></script>
<script type="text/javascript" src="jqueryc.js"></script>
<script type="text/javascript" src="jqueryd.js"></script>
<link rel="stylesheet" type="text/css" href=bootstrapa.css />
<link rel="stylesheet" type="text/css" href=bootstrapb.css />
<link rel="stylesheet" type="text/css" href=bootstrapc.css />
<%--<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.3/css/bootstrap.css" rel="stylesheet">--%>
<%--<link href="https://cdn.datatables.net/1.10.21/css/dataTables.bootstrap4.min.css" rel="stylesheet">--%>
<%--<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.13.17/css/bootstrap-select.min.css">--%>
<%--<script src="https://code.jquery.com/jquery-3.5.1.js"></script>--%>
<%--<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.1/umd/popper.min.js"></script>--%>
<%--<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.3/js/bootstrap.min.js"></script>--%>
<%--<script src="https://cdn.datatables.net/1.10.21/js/jquery.dataTables.min.js"></script>--%>
<%--<script src="https://cdn.datatables.net/1.10.21/js/dataTables.bootstrap4.min.js"></script>--%>
<script>
$(document).ready(function() {
var table = $('#list').DataTable({
lengthMenu: [
[2000, 1500, 1000, 500, -1],
[2000, 1500, 1000, 500, 'All'],
],
ordering: false, // Disable sorting for the entire table
initComplete: function () {
var api = this.api();
// Iterate over each column
this.api().columns().every( function () {
var column = this;
var columnIndex = column.index();
var columnHeader = $(column.header());
var title = this.header();
//replace spaces with dashes
title = $(title).html().replace(/[\W]/g, '-');
// Create a select element
var select = $('<select class="form-control show-tick" data-container="body" data-header="Select option(s)" data-actions-box="true" data-live-search="true" title="' + title + '" data-selected-text-format="count > 0" multiple><option value=""></option></select>')
.appendTo(columnHeader.empty())
.on('change', function () {
var selectedValues = $(this).val() || [];
// Filter based on selected values
if (selectedValues.length === 0) {
column.search('', true, false).draw();
} else {
var searchValue = '^(' + selectedValues.join('|') + ')$';
column.search(searchValue, true, false).draw();
}
});
// Populate the select element with unique values from the column
var uniqueValues = column.data().unique().sort();
uniqueValues.each(function (value, index) {
select.append('<option value="'+value+'">'+value+'</option>');
});
// Initialize selectpicker for Bootstrap Select
select.selectpicker('refresh');
});
},
footerCallback: function (row, data, start, end, display) {
var api = this.api();
var columnData = api.column(2, { page: 'current'}).data(); // Assuming 'Office' column index is 2
var total = columnData.length ?
columnData.reduce(function (a, b) {
return parseFloat(a) + parseFloat(b); // Assuming numeric values for sum
}) :
0;
$(api.column(2).footer()).html('Total: ' + total); // Inject the total into the footer cell of the 'Office' column
}
});
// Redraw the table and refresh selectpicker on draw
table.on('draw', function () {
table.columns().indexes().each(function ( idx ) {
var select = $(table.column(idx).header()).find('select');
if (select.val().length === 0) {
select.empty().append('<option value=""/>');
table.column(idx, { search: 'applied'}).data().unique().sort().each(function ( d, j ) {
select.append('<option value="'+d+'">'+d+'</option>');
});
select.selectpicker('refresh');
}
});
});
});
</script>
<style>
th, thead {
position: sticky;
top: 0;
border: 1px solid #dddddd;
background-color: #ABEBC6;
text-align: center;
table-layout: fixed;
height: 25px;
}
</style>
<script>
function exportToExcel() {
const table = document.getElementById("list");
const rows = table.getElementsByTagName("tr");
let csvContent = "";
for (let i = 0; i < rows.length; i++) {
const row = rows[i];
const cells = row.getElementsByTagName("td");
for (let j = 0; j < cells.length; j++) {
csvContent += cells[j].innerText + ",";
}
csvContent += "\n";
}
// Create a Blob with the CSV content
const blob = new Blob([csvContent], { type: "text/csv;charset=utf-8;" });
// Create a link element, hide it, direct it towards the Blob, and then 'click' it programatically
const link = document.createElement("a");
const url = URL.createObjectURL(blob);
link.setAttribute("href", url);
link.setAttribute("download", "table_data.csv");
link.style.visibility = "hidden";
document.body.appendChild(link);
link.click();
document.body.removeChild(link);
}
</script>
<script>
function clearFilters() {
var table = $('#list').DataTable();
// Clear each column's filter
table.columns().every(function() {
var column = this;
var select = $(column.header()).find('select');
// Clear the selectpicker
select.val([]).selectpicker('refresh');
// Clear the column search
column.search('').draw();
});
}
</script>
</head>
<body>
<form id="form1" runat="server">
<div>
<button onclick="exportToExcel()">Export to Excel</button>
<button type="button" onclick="clearFilters()">Clear Filters</button>
<div id="c1" runat="server">
<table cellspacing="0" class="myClass" id="list" style="width: 600px; font-family: Calibri; font-size: 11px; border-collapse: collapse; border: 1px solid black; z-index: 102;">
<thead>
<tr>
<th>Field 1</th>
<th>Field 2</th>
<th>Field 3</th>
</tr>
</thead>
<tbody>
<tr>
<td>APPLE (INDIA)</td>
<td>A</td>
<td>10</td>
</tr>
<tr>
<td>APPLE</td>
<td>B</td>
<td>5</td>
</tr>
<tr>
<td>APPLE</td>
<td>AB</td>
<td>40</td>
</tr>
<tr>
<td>APPLE</td>
<td>AC</td>
<td>20</td>
</tr>
<tr>
<td>APPLE</td>
<td>BD</td>
<td>35</td>
</tr>
</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>
</tr>
</tfoot>
</table>
</div>
</div>
</form>
</body>
</html>
Everything perfect fine on filter if data is in parentheses () then filter not working for example in Field1
if you select Apple it will show you all data
if you select in Apple (INDIA) its not showing the data.
Thanking You