JQuery With Oracle APEX

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>