declare
V_COMPANY_NAME VARCHAR2(100):='Golen Dairy Farm';
v_dept_name VARCHAR2(100):='Department wise employees';
N number:= 1;
gsl number(10):=0;
begin
---------------------
htp.p('
<a id="b_exit" type="button1" class="button button3" class="exit" '||'href="'||APEX_UTIL.PREPARE_URL('f?p=&APP_ID.:48:&SESSION.::&DEBUG.::::')||'">Close</a>
<input type="button1" class="button button1" class="t-Icon t-Icon--right fa fa-print" id="print" type="button" onclick="printdiv(''div_print1'');" value="Print"/><br/>
<div id="div_print1" style="margin-top:5px; align:right;" >
');
---------------------
htp.p('
<html>
<header>
<title>Bangladesh Medical</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
h2.page-header {
margin: 0;
padding: 0;
}
h3.page-header {
align:center;
margin: 0;
padding: 0;
}
h1 {
text-align: center;
text-transform: uppercase;
}
p {text-align: center;}
.napkin2,th,td {
border: 1px solid black ;
border-collapse: collapse;
padding: 5px;
}
.napkin,th {
border: 1px solid #607d8b ;
border-collapse: collapse;
padding: 5px;
}
.p1 {
border: 0px;
text-align: left;
}
.td1 {
border: 0px;
text-align: left;
}
.td1 {
border: 0px;
text-align: left;
}
.full {
width:100%;
}
.p00 {text-align: right; border: 0px;}
.m2 {text-align:center;}
.m3{text-align: center;
.m4{text-align: center;
border: 1px solid #607d8b;}
.m4{text-align: center;
border: 1px solid #607d8b;
}
.m5{text-align: center;}
.m1,.m2,.m3.m4,.m5 {border: 0px solid #607d8b;}
.m1{padding-left: 5px;}
.m2{padding-right: 5px;}
.m3{padding-right: 5px;}
.m4{padding-right: 5px;}
.lower { padding-top: 50px;}
.low,.low1 {text-align: center;}
</style>
</header>
<body>
<h2 class="page-header" align="center">'||V_COMPANY_NAME||'</h2>
<h3 class="page-header" align="center"><u>Department wise employees</u></h3>
');
for g in (select DEPARTMENT_ID FROM EMPLOYEES) LOOP
gsl:=gsl+1;
v_dept_name:=F_DEPT(g.DEPARTMENT_ID);
htp.p('<h4 class="page-header" align="left">'||'. Department Name: '||v_dept_name||'</h4>
');
htp.p('
<table class="napkin2" align="center" width=100% >
<thead>
<tr>
<th width="50px">SL</th>
<th width="400px">Name Of Employees </th>
<th width="100px">Email</th>
<th width="350px">Phone Number</th>
<th width="100px">Permanent Address</th>
<th width="100px">Basic Salary</th>
<th width="100px">Joining Date</th>
</tr>
</thead>
');
for r in (select rownum sl, FULLNAME,EMAIL,
PHONE1,PERMANENT_ADDRESS, BASIC_SALARY,JOINING_DATE
FROM EMPLOYEES
where DEPARTMENT_ID=g.DEPARTMENT_ID
ORDER BY EMPLOYEE_ID) loop
htp.p('
<tbody>
<tr>
<td width="50px" align=center >'||' '||htf.escape_sc(r.sl)||'</td>
<td width="400px" align=center>'||' '||htf.escape_sc(r.FULLNAME)||'</td>
<td width="100px" align=center>'||' '||htf.escape_sc(r.EMAIL)||'</td>
<td width="350px" align=center>'||' '||htf.escape_sc(r. PHONE1)||'</td>
<td width="100px" align=center>'||' '||htf.escape_sc(r.PERMANENT_ADDRESS)||'</td>
<td width="100px" align=center>'||' '||htf.escape_sc(r.BASIC_SALARY)||'</td>
<td width="100px" align=center>'||' '||htf.escape_sc(r.JOINING_DATE)||'</td>
</tr>
</tbody>
');
end loop;
htp.p('
</table>
</body>
');
end loop;
htp.p('</div>');
end;
=======================================
2. Copy and Past in Function and Global Variable :
function printdiv(printpage)
{
var headstr = "<html><head><title></title></head><body>";
var footstr = "</body>";
var newstr = document.all.item(printpage).innerHTML;
var oldstr = document.body.innerHTML;
document.body.innerHTML = headstr+newstr+footstr;
window.print();
document.body.innerHTML = oldstr;
return false;
}
3. If you want to design print button. You can use this CSS (Inline CSS)
.button {
background-color: #4CAF50; /* Green */
border: none;
color: white;
padding: 16px 32px;
text-align: center;
text-decoration: none;
display: inline-block;
font-size: 16px;
margin: 4px 2px;
-webkit-transition-duration: 0.4s; /* Safari */
transition-duration: 0.4s;
cursor: pointer;
}
.button1 {
background-color: white;
color: black;
border: 2px solid #008CBA;
}
.button1:hover {
background-color: #008CBA;
color: white;
}
.button3 {
background-color: white;
color: black;
border: 2px solid #f44336;
}
.button3:hover {
background-color: #f44336;
color: white;
}