Custom pagination for APEX 4.0 interactive report

Here are instructions how you can make custom pagination for interactive report on APEX 4.0.

Place to page JavaScript:

apex.jQuery(function(){
 apex.jQuery('#htmldbIR_x1').change(function(){
  gReport.navigate.paginate('pgR_min_row='+this.value+'max_rows='+$v('apexir_NUM_ROWS')+'rows_fetched='+$v('apexir_NUM_ROWS'));
 });
});
(function($){
 $.htmldbIrPagination=function(options){
  var p=$.trim($('#apexir_DATA_PANEL').find('td.pagination').find('span.fielddata').text());
  var a=new Array();
  var n=new Array();
  a=p.split(' ');
  $.each(a,function(i,v){
   if(!isNaN(v)){
    n.push(v);
   }
  });
  switch(options){
   case 'first':return n[0];
   case 'last':return n[1];
   case 'max':return n[2];
   default:return n;
  }
 };
 $.htmldbIrLastPageRow=function(){
  var lS=parseFloat($v('apexir_NUM_ROWS'));
  var lQ=parseFloat($.htmldbIrPagination('max'));
  var lN=Math.floor(lQ/lS);
  if(lS>1){lN=(lN*lS)+1;if(lN>lQ){lN=lN-lS}}else{return lQ;}
  return lN;
 };
 $.fn.htmldbIrPageSelect=function(){
  var lS=parseFloat($v('apexir_NUM_ROWS'));
  var lQ=parseFloat($.htmldbIrPagination('max'));
  var lN=Math.floor(lQ/lS);
  var lM=$.htmldbIrLastPageRow();
  var j=1;
  var l;
  if(lS==1){lN=lQ-1;}
  return this.each(function(i){
   $(this).empty();
   for(var i=0;i<=lN;i++){
    if(j+lS-1<=lQ){
     l='Rows '+j+' - '+(j+lS-1);
    }else{
     l='Rows '+j+' - '+lQ;
    }
    if(j<=lM){
     appendOpt(this,l,j);
    }
    j=j+lS;
   }
   $(this).val($.htmldbIrPagination('first'));
  });
  function appendOpt(pThis,d,r){
   var o=createOpt(d,r);
   $(pThis).append(o);
   function createOpt(d,r){return $('<option/>',{html:d,value:r});}
  }
 };
})(apex.jQuery);

 

Add to interactive report region footer:

<div id="htmldbIrCustPagination">
<a href="javascript:gReport.navigate.paginate('pgR_min_row=1max_rows='+$v('apexir_NUM_ROWS')+'rows_fetched='+$v('apexir_NUM_ROWS'))"><img align="absmiddle" alt="&lt;&lt;" title="&lt;&lt;" src="#IMAGE_PREFIX#srmvall.gif" /></a>
<select style="width:140px" id="htmldbIR_x1" size="1"></select>
<a href="javascript:gReport.navigate.paginate('pgR_min_row='+apex.jQuery.htmldbIrLastPageRow()+'max_rows='+$v('apexir_NUM_ROWS')+'rows_fetched='+$v('apexir_NUM_ROWS'))"><img align="absmiddle" alt="&gt;&gt;" title="&gt;&gt;" src="#IMAGE_PREFIX#smvall.gif" /></a>
</div>

Make sure that interactive report Pagination Type is "Row Ranges X to Y of Z" and region have some template.

 

Create dynamic Action. Select Advanced

• Name: IR Pagination
• Event: After Refresh
• Selection Type: Region
• Region: {select your interactive report region}
• Condition: No Condition
• Action: Execute JavaScript code
• Fire On Page Load: True
• Code:

  if(apex.jQuery('#apexir_DATA_PANEL').find('table.apexir_WORKSHEET_DATA td').length>0){
   apex.jQuery('#htmldbIR_x1').htmldbIrPageSelect();
   apex.jQuery('#htmldbIrCustPagination').show();
  }else{
   apex.jQuery('#htmldbIrCustPagination').hide();
  }

• Selection Type: None

 

See working example.

Download sample application.