I am encountering an issue with the pagination of Interactive Reports in Oracle APEX when dealing with datasets containing more than 1,000 rows. Specifically, the "Last" button does not work as expected; clicking it does not navigate to the last page but instead keeps the report on the first page.
Here’s a brief overview of what I’m trying to achieve and the code I’m using to handle custom pagination links (e.g., "First" and "Last" buttons):
Apex Version : 23.1.5
Goal: To implement "First" and "Last" buttons in the pagination bar that navigate to the first and last pages of the report.
Below is the JavaScript function written for handling the custom pagination:
function firstLastPageLinks( pDynActData )
{
var affectedRegionId = pDynActData.affectedElements[0].id;
var paginationExists = $("#" + affectedRegionId + " .a-IRR-pagination").length;
if ( !( paginationExists == '0' ) )
{
// get rows per page from hidden field
var rows_per_page = $("#" + affectedRegionId + "_row_select").attr("value");
// extract current row and number of records from pagination text (format "X of Y to Z")
var jqPagination = $("#" + affectedRegionId + " .a-IRR-pagination-label");
var paginationText = jqPagination.text();
var paginationSegments = paginationText.split(' ');
var first_displayed_row = paginationSegments[0];
var number_of_records = paginationSegments[paginationSegments.length-1];
var page_count = Math.ceil( parseInt(number_of_records) / parseInt(rows_per_page) );
var first_row_of_last_page = ((page_count - 1) * parseInt(rows_per_page)) + 1;
var data_first = 'pgR_min_row=' + '1' + 'max_rows=' + rows_per_page.toString() + 'rows_fetched=' + rows_per_page;
var data_last = 'pgR_min_row=' + first_row_of_last_page + 'max_rows=' + rows_per_page.toString() + 'rows_fetched=' + rows_per_page;
var buttonFirst = '<li class="a-IRR-pagination-item"><button class="a-Button a-IRR-button a-IRR-button--pagination" data-pagination="' + data_first + '" aria-label="First" title="First" aria-controls="' + affectedRegionId + '" type="button"> <span class="a-Icon icon-left-arrow" aria-hidden="true"></span> </button></li>';
var buttonLast = '<li class="a-IRR-pagination-item"><button class="a-Button a-IRR-button a-IRR-button--pagination" data-pagination="' + data_last + '" aria-label="Last" title="Last" aria-controls="' + affectedRegionId + '" type="button"> <span class="a-Icon icon-right-arrow" aria-hidden="true"></span> </button></li>';
var jqPaginationContainers = $("#" + affectedRegionId + " .a-IRR-pagination");
if ( first_displayed_row != '1' )
{
jqPaginationContainers.each(
function( index ) {
$(this).find(".a-IRR-pagination-item:first").prepend( buttonFirst );
}
);
}
if ( page_count > 2 )
{
var jqHiddenJumpToButton = $( '<button style="display: none;" class="a-Button a-IRR-button a-IRR-button--pagination" data-pagination="" aria-label="" title="" aria-controls="' + affectedRegionId + '" type="button">jump to page</button>' );
var jqSelect = $( '<select aria-label="Jump to Page" title="Jump to Page" aria-controls="' + affectedRegionId + '"/>' );
for ( var pageIdx = 0 ; pageIdx < page_count ; pageIdx++ )
{
var pageNumber = pageIdx+1;
jqSelect.append( '<option value="' + pageNumber + '">'+pageNumber+'</option>' );
}
jqSelect.val( Math.ceil( parseInt(first_displayed_row) / parseInt(rows_per_page) ) );
jqSelect.change( function( jqE ) {
var pageNumber = $( this ).val();
var first_row_of_page = ((pageNumber - 1) * parseInt(rows_per_page)) + 1;
jqHiddenJumpToButton.attr( "data-pagination", 'pgR_min_row=' + first_row_of_page + 'max_rows=' + rows_per_page.toString() + 'rows_fetched=' + rows_per_page );
jqHiddenJumpToButton.click();
} );
var jqPaginationLabelContainer = jqPagination; // $( ".a-IRR-pagination-item:has(.a-IRR-pagination-label)" );
jqPaginationLabelContainer.append( " | Page: " );
jqPaginationLabelContainer.append( jqSelect );
jqPaginationLabelContainer.append( jqHiddenJumpToButton );
}
if ( first_displayed_row != first_row_of_last_page )
{
jqPaginationContainers.each(
function( index ) {
$(this).find(".a-IRR-pagination-item:last").append( buttonLast ) ;
}
);
}
}
}
Steps to Reproduce:
Create an Interactive Report with more than 1,000 rows.
Use the above JavaScript code to add custom pagination buttons.
Test the "Last" button.
Expected Behavior:
The "Last" button should navigate to the last page of the report, displaying the final set of rows.
Observed Behavior:
The "Last" button does not navigate to the last page and remains stuck on the first page.
Any insights, suggestions, or corrections to the approach would be greatly appreciated.