jQuery DataTable is not working with ASP.Net Master Page export options are not showing.
<%@ Page Title="" Language="C#" MasterPageFile="~/Site1.Master" AutoEventWireup="true"
CodeBehind="form_appl_status.aspx.cs" Inherits="SakalaUpdatestatus.form_appl_status" %>
<asp:Content ID="Content1" ContentPlaceHolderID="head" runat="server">
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
<script src="https://code.jquery.com/jquery-3.3.1.js"></script>
<link rel="stylesheet" href="https://cdn.datatables.net/buttons/1.5.6/css/buttons.dataTables.min.css">
<script src="https://cdn.datatables.net/1.10.19/js/jquery.dataTables.min.js"></script>
<script src="https://cdn.datatables.net/buttons/1.5.6/js/dataTables.buttons.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jszip/3.10.1/jszip.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/pdfmake/0.1.53/pdfmake.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/pdfmake/0.1.53/vfs_fonts.js"></script>
<script src="https://cdn.datatables.net/buttons/1.6.1/js/buttons.colVis.min.js"></script>
<script src="https://cdn.datatables.net/1.10.19/js/dataTables.bootstrap.min.js"></script>
<script src="https://cdn.datatables.net/buttons/1.6.1/js/buttons.html5.min.js"></script>
<script src="https://cdn.datatables.net/buttons/1.6.1/js/buttons.print.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css">
<script>
$(document).ready(function () {
$('#example').DataTable({
"pagingType": "full_numbers",
lengthMenu: [
[10, 25, 50],
[10, 25, 50]
],
"searching": true,
"ordering": true,
"dom": 'lBfrtip',
'buttons': [{
'extend': 'colvis',
'columns': ':not(.noVis)',
className: 'btncolvis',
'text': '<i class="fa fas fa-list list-icon"></i> <span class="caret text-black"></span>'
},
{
'extend': 'collection',
'text': '<i class="fas fa-download download-icon"></i> <span class="caret text-black"></span>',
"buttons": [
{
extend: 'copyHtml5',
className: 'btnexport',
exportOptions: {
columns: ':visible'
},
text: '<i class="fas fa-copy copy-icon"></i> Copy',
},
{
extend: 'excelHtml5',
className: 'btnexport',
exportOptions: {
columns: ':visible'
},
text: '<i class="fas fa-file-excel excel-icon"></i> Excel',
},
{
extend: 'pdfHtml5',
className: 'btnexport',
orientation: 'landscape',
pageSize: 'A4',
exportOptions: {
columns: ':visible'
},
text: '<i class="fas fa-file-pdf pdf-icon"></i> PDF',
},
{
extend: 'csvHtml5',
className: 'btnexport',
exportOptions: {
columns: ':visible'
},
text: '<i class="fas fa-file-csv csv-icon"></i> CSV',
},
{
extend: 'print',
className: 'btnexport',
orientation: 'landscape',
pageSize: 'A4',
exportOptions: {
columns: ':visible'
},
text: '<i class="fas fa-print print-icon"></i> Print',
},
],
}],
});
});
</script>
<style>
.container { width: 35%; height: 100%; }
.dtcontainer { width: 75%; height: 100%; margin: auto; }
.row { padding-left: 20px; font-family: Calibri; font-size: 16px; font-display: block; font-style: italic; font-weight: bolder; }
.no-resize { resize: none; }
button { text-align: center; }
.copy-icon { color: blue; /* Change to your desired color */ }
.excel-icon { color: green; /* Change to your desired color */ }
.pdf-icon { color: red; /* Change to your desired color */ }
.csv-icon { color: orange; /* Change to your desired color */ }
.print-icon { color: rgb(234, 0, 255); /* Change to your desired color */ }
.list-icon { color: green /* Change to your desired color */; }
.download-icon { color: indigo /* Change to your desired color */; }
button.dt-button { background: #019ddd !important; border-radius: none; color: white; text-align: left; font-size: 12px; font-weight: bold; font-family: 'Times New Roman' , Times, serif; }
.btnexport { background: #019ddd !important; border-radius: 55px; color: white; width: 50px; padding-right: 25px; text-align: left; }
.btnexport:hover { background: green !important; border-radius: 55px; color: white; padding-right: 25px; }
.btncolvis { background: limegreen !important; color: white; width: 50px; padding-right: 25px; text-align: left; }
.pagination { padding-left: 1500px; }
.dt-buttons { padding-left: 1500px; }
.dataTables_filter { padding-left: 1640px; }
#example_wrapper { max-width: 100%; position: relative; }
.dataTables_info { font-size: 12px; font-weight: bold; color: #019ddd; }
#example { width: 100%; }
#example thead { background-color: #337ab7; color: white; }
</style>
</asp:Content>
<asp:Content ID="Content2" ContentPlaceHolderID="ContentPlaceHolder1" runat="server">
<br />
<div class="container">
<div id="Div1" class="panel panel-primary" runat="server">
<div class="panel-heading">
Check Application Details</div>
<div class="panel-body">
</div>
<div class="row">
<div class="col-md-4">
<asp:Label ID="Label1" runat="server" Text="Enter Sakala Numbers:"></asp:Label>
</div>
<div class="col-md-4">
<asp:TextBox ID="txtsakalalnos" runat="server" CssClass="no-resize" Style='text-transform: uppercase'
TextMode="MultiLine"></asp:TextBox>
</div>
<div class="col-md-4">
<asp:RequiredFieldValidator ID="RequiredFieldValidator1" runat="server" ErrorMessage="Please enter Sakala Numbers"
Font-Bold="True" Font-Size="Medium" ControlToValidate="txtsakalalnos" ForeColor="#FF3300"></asp:RequiredFieldValidator>
</div>
</div>
<br />
<div class="col-md-12 text-center">
<asp:Button ID="Button1" runat="server" Text="Fetch Details" Style="text-align: center"
OnClick="Button1_Click" />
<asp:Button ID="Button2" runat="server" Text="Reset" Style="text-align: center" />
</div>
<br />
<br />
</div>
<div class="row" style="text-align: center">
<div class="col-md-12">
<asp:Label ID="lblstatus" runat="server" ForeColor="#009900" Font-Size="Medium" Font-Italic="True"></asp:Label>
</div>
</div>
<br />
</div>
<div class="dtcontainer" id="datapanel" runat="server">
<div class="panel panel-primary">
<div class="panel-heading">
</div>
<div class="panel-body">
<br />
<br />
<asp:GridView ID="gvdetails" runat="server" AutoGenerateColumns="false" class="table table-striped"
Width="101%" Font-Bold="False" Font-Size="Small" Height="30px" Visible="False"
HeaderStyle-Width="30px" RowStyle-Height="20px">
<Columns>
<asp:BoundField DataField="RTOCODE" HeaderText="RTOCODE" />
<asp:BoundField DataField="SakalaNumber" HeaderText="SakalaNumber" />
<asp:BoundField DataField="ApplicationNumber" HeaderText="ApplicationNumber" />
<asp:BoundField DataField="ApplicationStatus" HeaderText="ApplicationStatus" />
</Columns>
<HeaderStyle BackColor="#336699" BorderColor="#669999" ForeColor="White" />
<RowStyle Height="20px"></RowStyle>
</asp:GridView>
</div>
</div>
</div>
</asp:Content>
public partial class form_appl_status : System.Web.UI.Page
{
protected void Page_Load(object sender, EventArgs e)
{
gvdetails.Visible = false;
datapanel.Visible = false;
}
protected void Button1_Click(object sender, EventArgs e)
{
string con = System.Configuration.ConfigurationManager.ConnectionStrings["constr"].ConnectionString;
// Get values from the text box and split into an array
string[] inputValues = txtsakalalnos.Text.Split(new[] { "\r\n", "\n" }, StringSplitOptions.RemoveEmptyEntries);
// Construct SQL query based on the input values
string query = "SELECT SakalaNumber,ApplicationNumber,ApplicationStatus,RTOCode FROM VahanToSakalaData WHERE SakalaNumber IN ({0})";
string parameters = string.Join(",", inputValues.Select((s, i) => $"@param{i}"));
query = string.Format(query, parameters);
// Set up the SqlConnection and SqlCommand
using (SqlConnection connection = new SqlConnection(con))
using (SqlCommand command = new SqlCommand(query, connection))
{
// Add parameters for each input value
for (int i = 0; i < inputValues.Length; i++)
{
command.Parameters.AddWithValue($"@param{i}", inputValues[i]);
}
// Open the connection and execute the query
connection.Open();
SqlDataAdapter adapter = new SqlDataAdapter(command);
DataTable dataTable = new DataTable();
adapter.Fill(dataTable);
datapanel.Visible = true;
gvdetails.Visible = true;
// Bind the data to the GridView
gvdetails.DataSource = dataTable;
gvdetails.DataBind();
// Close the connection
connection.Close();
}
}
}
