Hello
This Is My Aspx Page
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="A.aspx.cs" Inherits="Default3" %>
<html>
<head runat="server">
<title>demo</title>
<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 src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.13.17/js/bootstrap-select.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());
// 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="All" 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>
</head>
<body>
<form id="form1" runat="server">
<div>
<button onclick="exportToExcel()">Export to Excel</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</td>
<td>A</td>
<td>10</td>
</tr>
<tr>
<td>APPLE</td>
<td>AB</td>
<td>5</td>
</tr>
<tr>
<td>APPLE</td>
<td>A</td>
<td>3</td>
</tr>
<tr>
<td>APPLE</td>
<td>AC</td>
<td>2</td>
</tr>
<tr>
<td>APPLE</td>
<td>AC</td>
<td>7</td>
</tr>
<tr>
<td>MANGO</td>
<td>BG</td>
<td>10</td>
</tr>
<tr>
<td>MANGO</td>
<td>AC</td>
<td>3</td>
</tr>
<tr>
<td>MANGO</td>
<td>DC</td>
<td>5</td>
</tr>
<tr>
<td>BANANA</td>
<td>WE</td>
<td>15</td>
</tr>
<tr>
<td>BANANA</td>
<td>DS</td>
<td>5</td>
</tr>
<tr>
<td>BANANA</td>
<td>AB</td>
<td>35</td>
</tr>
<tr>
<td>APPLE</td>
<td>A</td>
<td>10</td>
</tr>
<tr>
<td>APPLE</td>
<td>AB</td>
<td>5</td>
</tr>
<tr>
<td>APPLE</td>
<td>A</td>
<td>3</td>
</tr>
<tr>
<td>APPLE</td>
<td>AC</td>
<td>2</td>
</tr>
<tr>
<td>APPLE</td>
<td>AC</td>
<td>7</td>
</tr>
<tr>
<td>MANGO</td>
<td>BG</td>
<td>10</td>
</tr>
<tr>
<td>MANGO</td>
<td>AC</td>
<td>3</td>
</tr>
<tr>
<td>MANGO</td>
<td>DC</td>
<td>5</td>
</tr>
<tr>
<td>BANANA</td>
<td>WE</td>
<td>15</td>
</tr>
<tr>
<td>BANANA</td>
<td>DS</td>
<td>5</td>
</tr>
<tr>
<td>BANANA</td>
<td>AB</td>
<td>35</td>
</tr>
<tr>
<td>APPLE</td>
<td>A</td>
<td>10</td>
</tr>
<tr>
<td>APPLE</td>
<td>AB</td>
<td>5</td>
</tr>
<tr>
<td>APPLE</td>
<td>A</td>
<td>3</td>
</tr>
<tr>
<td>APPLE</td>
<td>AC</td>
<td>2</td>
</tr>
<tr>
<td>APPLE</td>
<td>AC</td>
<td>7</td>
</tr>
<tr>
<td>MANGO</td>
<td>BG</td>
<td>10</td>
</tr>
<tr>
<td>MANGO</td>
<td>AC</td>
<td>3</td>
</tr>
<tr>
<td>MANGO</td>
<td>DC</td>
<td>5</td>
</tr>
<tr>
<td>BANANA</td>
<td>WE</td>
<td>15</td>
</tr>
<tr>
<td>BANANA</td>
<td>DS</td>
<td>5</td>
</tr>
<tr>
<td>BANANA</td>
<td>AB</td>
<td>35</td>
</tr>
<tr>
<td>APPLE</td>
<td>A</td>
<td>10</td>
</tr>
<tr>
<td>APPLE</td>
<td>AB</td>
<td>5</td>
</tr>
<tr>
<td>APPLE</td>
<td>A</td>
<td>3</td>
</tr>
<tr>
<td>APPLE</td>
<td>AC</td>
<td>2</td>
</tr>
<tr>
<td>APPLE</td>
<td>AC</td>
<td>7</td>
</tr>
<tr>
<td>MANGO</td>
<td>BG</td>
<td>10</td>
</tr>
<tr>
<td>MANGO</td>
<td>AC</td>
<td>3</td>
</tr>
<tr>
<td>MANGO</td>
<td>DC</td>
<td>5</td>
</tr>
<tr>
<td>BANANA</td>
<td>WE</td>
<td>15</td>
</tr>
<tr>
<td>BANANA</td>
<td>DS</td>
<td>5</td>
</tr>
<tr>
<td>BANANA</td>
<td>AB</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>
I Want To Add Header Text For Each Column Example Field1 Field2 Field3.
Please Help Me To Solve This Thanking You