PL-SQL，Oracle Apex：如何向 PL-SQL 动态内容 table 添加分页？

Question

我在 Oracle Apex 中创建了一个 PL-SQL 动态内容报告，但是我无法弄清楚如何向其添加分页。我的行太多，因此向 table 添加分页将提供更好的用户体验。我的示例代码如下所示：

开始

htp.p('<table>
  <tr> <th>ID</th> 
  <th>First Name</th> 
      <th>Last Name</th>
  <th>Email</th></tr>'); 

    for i in(select * from exampleTable)
    loop
        
            htp.p('<tr>
                <td>'||i.id||'</td>
                <td>'||i.first_Name||'</td>
                <td>'||i.last_name||'</td>
                <td>'||i.email||'</td>
            </tr>');
    
    end loop;

htp.p('</table>');

结束；

Answer 1

在页面上创建两个隐藏项，例如 Pxx_START_ROW 和 Pxx_PAGE_SIZE。
修改要分页的查询。这将要求您以某种方式对数据进行排序，假设您希望结果是确定性的。所以而不是

select * 来自 exampleTable

你会

 select *
   from exampleTable e
  order by e.id
 offset :Pxx_START_ROW rows
  fetch next :Pxx_PAGE_SIZE rows only

然后创建一个进程，在您单击某种“上一个”或“下一个”按钮时更新 Pxx_START_ROW。您可能希望更新动态过程以生成这些按钮，因为我希望您希望它们成为 table 的一部分，尽管从功能上讲您可以在不同的区域创建这些按钮。

Answer 2

转到页面 > JavaScript > 文件 URL，使用此 url

https://cdn.datatables.net/1.10.23/js/jquery.dataTables.min.js
https://cdn.datatables.net/1.10.23/js/dataTables.bootstrap4.min.js

转到页面 > CSS > 文件 URL，使用此 url

https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.5.2/css/bootstrap.css
https://cdn.datatables.net/1.10.23/css/dataTables.bootstrap4.min.css

创建区域，区域类型PLSQL动态内容

begin
htp.p('
<table id="example" class="table table-striped table-bordered" style="width:100%">
    <thead>
        <tr> 
            <th>ID</th> 
            <th>First Name</th> 
            <th>Last Name</th>
            <th>Email</th>
        </tr>
    </thead>
    <tbody>'); 

    for i in(select * from exampleTable)
    loop

        htp.p('
        <tr>
            <td>'||i.id||'</td>
            <td>'||i.first_Name||'</td>
            <td>'||i.last_name||'</td>
            <td>'||i.email||'</td>
        </tr>');
    end loop;
    htp.p('
    <tbody>
</table>');
end;

PL-SQL，Oracle Apex：如何向 PL-SQL 动态内容 table 添加分页？

PL-SQL, Oracle Apex: How can I add pagination to a PL-SQL dynamic content table?

html

javascript

css

plsql

oracle-apex