Hi firasataries,
Please refer below sample code.
Database
For this example I have used of Northwind database that you can download using the link given below.
Download Northwind Database
Here, In this example I have use Customers table.
HTML
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Planning</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="assets/images/NA.png" rel="icon">
<link href="assets/images/NA.png" rel="apple-touch-icon">
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/css/bootstrap.min.css"
rel="stylesheet">
<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/js/bootstrap.bundle.min.js"></script>
<!-- Including the bootstrap CDN -->
<%-- <link rel="stylesheet" href="assets/css/bootstrap.min.css">
<link rel="stylesheet" href="assets/css/datatables.min.css">
<link rel="stylesheet" href="assets/css/style.css">--%>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js">
</script>
<style>
.custom { width: 235px !important; }
.mycolor { background-color: #154290; }
.mycolorbg { background-color: #E1EBFB; }
.mycolorbgorange { background-color: #F5791E; }
.auto-style3 { color: #808000; }
.footer { position: fixed; bottom: 0; width: 100%; }
</style>
</head>
<body>
<header class="header_part">
<div>
<nav class="navbar navbar-expand-sm bg-light col-md-12">
<img alt="" height="50" src="Images\Tulips.jpg" />
<span style="font-family: Times New Roman; text-align: center; font-size: xx-large;
color: #F5791E"> <strong> System Planning Business Unit</strong> </span>
<ul class="navbar-nav ml-auto ">
<li class="nav-item"><a class="nav-link " href="#">Contacts </a></li>
<li class="nav-item"><a class="nav-link " href="#">H o m e </a></li>
</ul>
</nav>
</div>
</header>
<form id="form1" runat="server">
<!-- Topbar -->
<div class="card-body justify-content-center mycolorbg">
<div class="col-md-12 text-center">
<button type="button" class="btn btn-primary btn-lg custom mycolor">
Manpower</button>
<button type="button" class="btn btn-primary btn-lg custom mycolor">
Budget</button>
<button type="button" class="btn btn-primary btn-lg custom mycolor">
Training</button>
<button type="button" class="btn btn-primary btn-lg custom mycolor">
Improvement Studies</button>
</div>
</div>
<br />
<div class="container col-12">
<div class="row">
<div>
<div class="data_table">
</div>
<asp:GridView ID="gvCustomers" CellPadding="4" ForeColor="#333333" CssClass="table table-bordered table-hover table-striped thead-dark GridCustomers"
runat="server" AutoGenerateColumns="False" Font-Names="Arial" Font-Size="X-Small">
<Columns>
<asp:BoundField DataField="CustomerID" HeaderText="Customer ID">
<HeaderStyle HorizontalAlign="Center" />
<ItemStyle HorizontalAlign="Justify" />
</asp:BoundField>
<asp:BoundField DataField="CompanyName" HeaderText="Company Name">
<HeaderStyle HorizontalAlign="Center" />
<ItemStyle HorizontalAlign="Justify" />
</asp:BoundField>
<asp:BoundField DataField="ContactName" HeaderText="Contact Name">
<HeaderStyle HorizontalAlign="Center" />
<ItemStyle HorizontalAlign="Justify" />
</asp:BoundField>
<asp:BoundField DataField="ContactTitle" HeaderText="Contact Title">
<HeaderStyle HorizontalAlign="Center" />
<ItemStyle HorizontalAlign="Justify" />
</asp:BoundField>
<asp:BoundField DataField="Address" HeaderText="Address">
<HeaderStyle HorizontalAlign="Center" />
<ItemStyle HorizontalAlign="Justify" />
</asp:BoundField>
<asp:BoundField DataField="City" HeaderText="City">
<HeaderStyle HorizontalAlign="Center" />
<ItemStyle HorizontalAlign="Justify" />
</asp:BoundField>
<asp:BoundField DataField="Region" HeaderText="Region">
<HeaderStyle HorizontalAlign="Center" />
<ItemStyle HorizontalAlign="Justify" />
</asp:BoundField>
<asp:BoundField DataField="PostalCode" HeaderText="Postal Code">
<HeaderStyle HorizontalAlign="Center" />
<ItemStyle HorizontalAlign="Justify" />
</asp:BoundField>
<asp:BoundField DataField="Country" HeaderText="Country">
<HeaderStyle HorizontalAlign="Center" />
<ItemStyle HorizontalAlign="Justify" />
</asp:BoundField>
<asp:BoundField DataField="Phone" HeaderText="Phone">
<HeaderStyle HorizontalAlign="Center" />
<ItemStyle HorizontalAlign="Justify" />
</asp:BoundField>
<asp:BoundField DataField="Fax" HeaderText="Fax">
<HeaderStyle HorizontalAlign="Center" />
<ItemStyle HorizontalAlign="Justify" />
</asp:BoundField>
<asp:HyperLinkField DataTextField="CustomerID" HeaderText="">
<HeaderStyle HorizontalAlign="Center" />
<ItemStyle HorizontalAlign="Justify" />
</asp:HyperLinkField>
</Columns>
</asp:GridView>
</div>
</div>
</div>
<!-- grid view datatable to
<!--
<div style="width: 500px">
-->
<!-- Modal Popup -->
<!-- Modal Popup -->
</form>
<link rel="stylesheet" href="https://cdn.datatables.net/1.10.12/css/jquery.dataTables.min.css" />
<link rel="stylesheet" href="https://cdn.datatables.net/buttons/1.2.2/css/buttons.dataTables.min.css" />
<script type="text/javascript" src="https://cdn.datatables.net/1.10.12/js/jquery.dataTables.min.js"></script>
<script type="text/javascript" src="https://cdn.datatables.net/buttons/1.2.2/js/dataTables.buttons.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jszip/2.5.0/jszip.min.js"></script>
<script type="text/javascript" src="https://cdn.rawgit.com/bpampuch/pdfmake/0.1.18/build/pdfmake.min.js"></script>
<script type="text/javascript" src="https://cdn.rawgit.com/bpampuch/pdfmake/0.1.18/build/vfs_fonts.js"></script>
<script type="text/javascript" src="https://cdn.datatables.net/buttons/1.2.2/js/buttons.html5.min.js"></script>
<!-- imp: if you dont want record 5 10 all to show use Bfrtip other wise use Blfrtip
-->
<script type="text/javascript">
$(function () {
$.ajax({
type: "POST",
url: "VB.aspx/GetCustomers",
data: '{}',
contentType: "application/json; charset=utf-8",
dataType: "json",
success: OnSuccess,
failure: function (response) {
alert(response.d);
},
error: function (response) {
alert(response.d);
}
});
});
function OnSuccess(response) {
$(".GridCustomers").DataTable({
bLengthChange: true,
lengthMenu: [[5, 10, -1], [5, 10, "All"]],
bFilter: true,
bSort: true,
bPaginate: true,
data: response.d,
dom: 'Blfrtip',
columns: [{ 'data': 'CustomerID' },
{ 'data': 'CompanyName' },
{ 'data': 'ContactName' },
{ 'data': 'ContactTitle' },
{ 'data': 'Address' },
{ 'data': 'City' },
{ 'data': 'Region' },
{ 'data': 'PostalCode' },
{ 'data': 'Country' },
{ 'data': 'Phone' },
{
'data': 'Fax',
"render": function (data, type, row, meta) {
return '<a href="#" onclick="GetData(\'' + data + '\');">' + data + '</a>';
}
},
{
'data': 'CustomerID',
"render": function (data, type, row, meta) {
var navigateUrl = "logout.aspx?CustomerID=" + data;
if (type === 'display') {
data = '<a href="' + navigateUrl + '" target="_blank">' + data + '</a>';
}
return data;
}
}],
buttons: [
{
extend: 'excel', text: 'Excel', className: 'exportExcel',
filename: 'Planningexcel', exportOptions: { modifier: { page: 'all'} }
},
{ extend: 'copy', text: 'Copy to clipboard', className: 'exportExcel', exportOptions: { modifier: { page: 'all'}} },
{ extend: 'csv', text: 'Export to CSV', className: 'exportExcel', filename: 'Planning_Csv', exportOptions: { modifier: { page: 'all'}} },
{
extend: 'pdf', text: 'PDF', className: 'exportExcel', filename: 'Planningpdf',
exportOptions: { modifier: { page: 'all' }, columns: ':visible' }, orientation: 'landscape', pageSize: 'LEGAL'
}
]
});
};
function GetData(data) {
alert(data);
// Code for opening the modal popup.
};
</script>
<div class="card-footer text-secondary text-center footer">
Copyright © National Grid SA 2023</div>
</body>
</html>
Namespaces
Imports System.IO
Imports System.Data
Imports System.Data.SqlClient
Imports System.Collections
Imports System.Configuration
Imports System.Web.Services
Code
Private strConnString As String
Protected Sub Page_Load(ByVal sender As Object, ByVal e As EventArgs) Handles Me.Load
If Not Me.IsPostBack Then
Dim dummy As DataTable = New DataTable()
dummy.Columns.Add("CustomerID")
dummy.Columns.Add("CompanyName")
dummy.Columns.Add("ContactName")
dummy.Columns.Add("ContactTitle")
dummy.Columns.Add("Address")
dummy.Columns.Add("City")
dummy.Columns.Add("Region")
dummy.Columns.Add("PostalCode")
dummy.Columns.Add("Country")
dummy.Columns.Add("Phone")
dummy.Columns.Add("Fax")
dummy.Rows.Add()
gvCustomers.DataSource = dummy
gvCustomers.DataBind()
'Required for jQuery DataTables to work.
gvCustomers.UseAccessibleHeader = True
gvCustomers.HeaderRow.TableSection = TableRowSection.TableHeader
End If
End Sub
<WebMethod()>
Public Shared Function GetCustomers() As List(Of Customer)
Dim customers As List(Of Customer) = New List(Of Customer)()
Dim constr As String = ConfigurationManager.ConnectionStrings("constr").ConnectionString
Using con As New SqlConnection(constr)
Using cmd As New SqlCommand("SELECT TOP 15 CustomerID, CompanyName, ContactName, ContactTitle, Address, City, Region, PostalCode, Country, Phone, Fax FROM Customers", con)
cmd.CommandType = CommandType.Text
con.Open()
Dim dr As SqlDataReader = cmd.ExecuteReader()
While dr.Read()
customers.Add(New Customer With {
.CustomerID = dr(0).ToString(),
.CompanyName = dr(1).ToString(),
.ContactName = dr(2).ToString(),
.ContactTitle = dr(3).ToString(),
.Address = dr(4).ToString(),
.City = dr(5).ToString(),
.Region = dr(6).ToString(),
.PostalCode = dr(7).ToString(),
.Country = dr(8).ToString(),
.Phone = dr(9).ToString(),
.Fax = dr(10).ToString()})
End While
con.Close()
End Using
End Using
Return customers
End Function
Public Class Customer
Public Property CustomerID As String
Public Property CompanyName As String
Public Property ContactName As String
Public Property ContactTitle As String
Public Property Address As String
Public Property City As String
Public Property Region As String
Public Property PostalCode As String
Public Property Country As String
Public Property Phone As String
Public Property Fax As String
End Class
Screenshot
