Single Article

Custom pagination for APEX 4.0 interactive report

Category APEX Tricks

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.

Comment Button

Comments

  • Jari Laine 16 Mar 2018  

    Hi ashwin,

    I don't have example that works on APEX 5.x.
    Please check this plugin. There might be also other plugins for this in that site.

    Regards,
    Jari

        
  • ashwin 15 Mar 2018  

    Hi,

    I would like to know how this can be achieved in apex 5.1 version as the api used in this post is not compatible with latest versions.

    Please suggest.

    Thanks.

        
  • Cindy 7 Jan 2014  

    Please disregrad prior comment I found where to modify the width in the "Add to interactive report region footer:" section.

    Working perfectly.

    Many Thanks!

    Cindy

        
  • Jari Laine 7 Jan 2014  

    Hi Cindy,

    Hmm. It might that APEX 4.1 do not have that option under page attributes. I'm not remember anymore.

    Other option is add style to page HTML header. Edit page attributes and add to HTML header section

    <style type="text/css">
    .htmldbIrPageSelect{
      width:150px;
    }
    </style>

    Regards,
    Jari

        
  • Cindy 7 Jan 2014  

    Jari,

    What do you mean by "try add to page inline CSS?" I have attempted to implement this in several places including modifying the template... with no success.

    Thank you,

    Cindy

        
  • Jari Laine 7 Jan 2014  

    Hi Cindy,

    For workaround you could try add to page inline CSS e.g.

    .htmldbIrPageSelect{
      width:150px;
    }

    It is not very elegant, and might not work with all themes.

    I try look more into this later.

    Regards,
    Jari

        
  • Cindy 7 Jan 2014  

    I'm using apex 4.1 and I really appreciate the solution you've provided. This is working perfectly. I need to widen the box that displays the pages... I'm not sure if this is even controled in the code you provided or in the template for the page.

    We can view the listfine at 1-15 of 2149 but it cuts off the numbers as we get up to 106-120 of 2149; the 49 is cut off of the right end in the view.

        
  • Jari Laine 24 Aug 2013  

    Hi Cip1451,

    If you use same region template for all interactive report you can create dynamic action that use class as jQuery selector.

    Or you can set same static id for all interactive report regions and use that as jQuery selector.

    Regards,
    Jari

        
  • Cip1451 23 Aug 2013  

    It's working your example on apex.oracle.com.

    I try to adapt your example to work with a Page Zero for all my interactive regions but I've some problems with dynamic action.

    Do you want to collaborate with me to finalise your example with page zero?

    Thank you again!

        
  • Jari Laine 22 Aug 2013  

    Hi Cip1451,

    Could you please replicate issue on apex.oracle.com and share developer login details to workspace ?

    Regards,
    Jari

        

Global Right Column

Search

Archives

Subscribe in a Reader