Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
Repeated Table Header for Oracle APEX Interactive Report
/**
* ApexInteractiveRepeatedHeader
* @author J. Reuben Wetherbee <jrweth@gmail.com>
*
* Takes the header row of an Oracle Apex Interactive Report and repeats throughout the table
*
* To initiate repeated header do the following:
*
* - upload this file in the "Application->Shared Components->Static Files" section
* - in the "edit page->javascript->file Url" reference the file "#APP_IMAGES#ApexInteractiveRepeatedHeader.js"
* - in the "edit page->javascript->Execute When Page Loads" initiate the table: "ApexInteractiveRepeatedHeader({repeatPerRow: 6});"
*
*
*
*/
function ApexInteractiveRepeatedHeader(options)
{
//default options
var defaultOptions = {
tableSelector: 'table.apexir_WORKSHEET_DATA',
repeatPerRow: 10
}
var options = $.extend(defaultOptions, options);
var $tableRoot = $(options.tableSelector); //jquery object for the table
var currentColumnHeader; //the column Header that has most recently been clicked
//check to see if the table exists
if ($(options.tableSelector).length === 0) {
$('.apexir_FIXED_HEADER_LOADING').hide();
return false;
}
//setup listener for when the table gets refreshed due to filtering etc.
$(document).bind("apexafterrefresh", function(){
ApexInteractiveRepeatedHeader(options);
});
//grab the Header html
var headerHtml = $tableRoot.find('tbody th').not('.apexir_REPEAT_HEADING').parent().first().html();
if (headerHtml.length > 0) {
$tableRoot.find('tr.apexir_INSERTED_REPEATED_HEADER').remove();
$tableRoot.find('tr:nth-child(' + options.repeatPerRow + 'n + ' + options.repeatPerRow + ')').after('<tr class="apexir_INSERTED_REPEATED_HEADER">' + headerHtml + '</tr>');
}
//recursive function to reposition header rollover options once it is displayed
var columnRolloverAdjust = function() {
var currentOffset, newOffset;
//still hidden try back in a bit
if($('#apexir_rollover').css('display') === 'none') {
setTimeout(columnRolloverAdjust, 50);
}
else {
currentOffset = $("#apexir_rollover").offset();
newOffset = currentColumnHeader.offset();
$("#apexir_rollover").offset({top: newOffset.top + currentColumnHeader.height(), left: currentOffset.left});
}
};
//setup listeners for user clicking on Header
$(document).on("click", options.tableSelector + " th", function(e) {
currentColumnHeader = $(e.currentTarget);
});
//setup listener for when content of header rollover has ben updated
$("#apexir_rollover_content").on("change", function(e) {
columnRolloverAdjust();
});
return true;
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.