JQuery With Oracle APEX 19.1
Video Link: https://youtu.be/ux9dcKfo5jk
Table
---------------------------
CREATE TABLE "EBA_DEMO_IG_EMP" ( "EMPNO" NUMBER NOT NULL ENABLE, "ENAME" VARCHAR2(60), "JOB" VARCHAR2(9), "MGR" NUMBER, "HIREDATE" DATE, "SAL" NUMBER(7,2), "COMM" NUMBER(7,2), "ONLEAVE" VARCHAR2(1) NOT NULL ENABLE, "NOTES" VARCHAR2(1000), "DEPTNO" NUMBER, "FLEX1" VARCHAR2(1000), "FLEX2" VARCHAR2(1000), "FLEX3" VARCHAR2(1000), "FLEX4" VARCHAR2(1000), "RATING" NUMBER ) /
Pl Content Script
-----------------------------------
begin
htp.p('<input id="myInput" type="text" placeholder="Search..">');
htp.p('<style type="text/css">
/*header table 1 css*/
#table_1 h3{
font-size: 30px;
margin:0px;
}
#table_1 tr td{
font-size: 20px;
}
#table_3,
#table_3 td{
border: 1px solid black;
border-collapse: collapse;
}
</style>');
htp.p('<table id="table_1" width="100%" style="text-align: center;">
<thead><tr>
<td><h3>Oracle APEX Bangladesh</h3></td></tr></thead>
<thead><tr>
<td>Chittagong</td></tr></thead>
<thead><tr>
<td><ul>Employee Report</ul></td></tr></thead>');
htp.p('</table>');
htp.p('<table id="table_3" width="100%" cellpadding="5px" style="text-align: center;">
<thead><td>Emp NO</td>
<td>Employee name</td>
<td>Job </td>
<td>Mgr </td></td>');
for x in (select empno,ename,job,mgr from EBA_DEMO_IG_EMP)
loop
htp.p('<tbody id="myTable"><tr>
<td>'||htf.escape_sc(x.empno)||'</td>
<td>'||htf.escape_sc(x.ename)||'</td>
<td>'||htf.escape_sc(x.job)||'</td>
<td>'||htf.escape_sc(x.mgr)||'</td></tr></tbody>');
end loop;
htp.p('</table>');
htp.p('</div>');
end;
Copy and Past in Page Header
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.0/jquery.min.js"></script>
<script>
$(document).ready(function(){
$("#myInput").on("keyup", function() {
var value = $(this).val().toLowerCase();
$("#myTable tr").filter(function() {
$(this).toggle($(this).text().toLowerCase().indexOf(value) > -1)
});
});
});
</script>
