How do I incorporate pagination into a PL-SQL dynamic content table in Oracle Apex?

I've successfully created a PL-SQL dynamic content report in Oracle Apex, but I'm struggling with implementing pagination. With too many rows to display at once, adding pagination will greatly enhance the user experience. Here is a snippet of my code:

BEGIN

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>');

END;

Answer №1

  • Add two hidden elements on the webpage, for example, Pxx_START_ROW and Pxx_PAGE_SIZE.

  • Revise your query to include pagination. This necessitates sorting the data in a specific way if you want predictable results. Instead of:

    select * from exampleTable

You would use:

 select *
   from exampleTable e
  order by e.id
 offset :Pxx_START_ROW rows
  fetch next :Pxx_PAGE_SIZE rows only
  • Create a mechanism that updates Pxx_START_ROW when users click "Previous" or "Next" buttons. You may need to update your dynamic process to incorporate these buttons into the table, although technically they could be placed in a separate region.

Answer №2

Visit the following pages for JavaScript and CSS File URLs:

JavaScript:
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:
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

To create a region with PLSQL dynamic content, follow these steps:

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;

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Tips for locking the position of a table header and allowing only the table body to scroll

I have designed a table with tbody consisting of 2 tr elements. One tr is used for hiding/showing data. I am trying to keep the Table header fixed while only scrolling the table body. However, as I am using angular js ng-repeat on the tbody, I am encounte ...

Execute functions during jquery's .animate() operation

This is a snippet of code I use to smoothly scroll the browser back to the top: $('html, body').animate({scrollTop: 0}, 500, "easeOutQuart"); Now, I am looking for a way to prevent the user from scrolling while this animation is running. Once t ...

What is the methodology behind incorporating enumerations in typescript?

I've been curious about how typescript compiles an enumeration into JavaScript code. To explore this, I decided to create the following example: enum Numbers { ONE, TWO, THREE } Upon compilation, it transformed into this: "use strict ...

When using Angular, the onSelectionChange event is not triggered for angular mat-option components

I am working with a mat-form-field that includes both an input field and a mat-autocomplete feature with mat-options. The input field has a (blur) event triggered when it loses focus, while the mat-option has an (onSelectionChange) event triggered when an ...

Unordered list not floating properly - successful in JSFiddle but not displaying correctly in web browser despite updating Chrome and Firefox

Having trouble floating an unordered list? Check out this jfiddle example that aligns a list next to some text: Here is the updated jfiddle link: https://jsfiddle.net/8qzygaog/ I created a test document based on the example, but it's not working as ...

Encountering issues with AngularJS number filter when integrating it with UI grid

When using the angularjs number filter in angular-ui-grid, I am facing an issue. The filter works perfectly fine within the grid, but when I export the grid to csv and open it in Excel, the formatting is not maintained. I have included the filter in the e ...

Can Bootswatch be installed using a package manager?

I have recently launched a small asp.net core website. Right now, all JS/CSS imports are from NPM and I am using webpack to bundle them together. Instead of sticking with the standard bootstrap template, I wanted to switch to bootswatch paper, but unfortu ...

Is there a better alternative to using nested async callbacks?

Imagine I need to execute asynchronous actions like sending an email and updating the database. Usually, I would write code like this: send_email(function(err, id){ if(err){ console.log("error"); }else{ update_database(id,function( ...

What is the best way to eliminate the underline text decoration from a link element?

Take a look at this JS Bin. I want to change the link Project name in there. By default, it is underlined when hovered over. How can I remove that effect? I attempted using a class project-name: a:hover, a:focus .project-name { text-decoration: non ...

The aesthetic of react-bootstrap and material ui aesthetics is distinctive and visually appealing

As I develop my web application, I have incorporated react-bootstrap for its React components based on Bootstrap. However, wanting to give my project a customized look inspired by Material design, I came across bootstrap-material-design. I am curious if I ...

Javascript Promise: managing the flow of execution

There are a series of tasks that I need to accomplish using an API. It's crucial that these functions are executed sequentially. Each of the functions mentioned below returns a valid promise. a(analyticsConfig._listConfig) .then(function() { ...

Having trouble making the child process die in NodeJS fork

I'm facing a roadblock here, perhaps it's just a minor issue that I can't seem to solve because of my lack of experience with NodeJS. Currently, I am developing a Bluetooth device that will be controlled by a master application. For prototy ...

The Android webview encountered an error: XMLHttpRequest failed to load because the specified Origin <url> is not permitted by Access-Control-Allow-Origin restrictions

I have developed an application that loads an entire website in an Android WebView. The native code in the Android project communicates with the webpage using the Android Jockey Library, and vice versa. Everything is working smoothly except for one instan ...

Unable to transfer the properties of reactjs to react-chartist

How can I pass the state from the parent component "main.js" into the child component "bar.js"? //main.js import React, { Component } from 'react'; import BarChart from './Bar-chart'; class Hero extends Component { cons ...

Autocomplete feature in ant design for a seamless user experience

I am currently incorporating an Ant Design Autocomplete component in the header of my webpage, specifically for searching purposes. My goal is to clear the text input every time there is a change in the route. Below is the code snippet for the Autocomplete ...

Step-by-step guide for setting up chartjs on Laravel 6 using npm

Can anyone guide me on how to properly install and integrate [email protected] in my laravel application? Currently, I am using cdn links, but I want to avoid that in the future. List of cdn links being used: <script src="https://cdnjs.c ...

Miscalculation in PHP MySQL: Incorrect output when adding field 1 and multiplying field 2 by

In my MySQL table, there are 4 fields: product price cost, selling price, stock of products, and earnings per unit. For example: If the cost of our product is $100, we sell it for $120, and we have a stock of 10 units, the following code calculates the e ...

Angular Karma encountered an error: TypeError - It is unable to read the property '_id' as it is undefined

Encountering an issue while testing with karma jasmine, the error message appears as... TypeError: Cannot read property '_id' of undefined This is the Component.ts file: import { Component, OnInit } from '@angular/core'; import { ApiSe ...

Adaptable design tailored for smartphones

When it comes to developing mobile websites for various platforms such as iPhone 3 and 4, Android, Blackberry Torch, etc., I usually find myself needing to slice images based on the specific platform. The challenge arises from constantly having to slice im ...

How can I omit extra fields when using express-validator?

Currently, I am integrating express-validator into my express application and facing an issue with preventing extra fields from being included in POST requests. The main reason for this restriction is that I pass the value of req.body to my ORM for databas ...