Custom pagination for APEX 3.2 interactive report with jQuery

Here are instructions how you can make custom pagination for interactive report in APEX 3.2.

Load jQuery library in page template header or page HTML header.

Place to page HTML header:

<script type="text/javascript">
$(function(){
 $('#htmldbIR_x1').bind({
  'htmldbIrReady':function(){
   $(this).htmldbIrPageSelect();
  },'change':function(){
   gReport.navigate.paginate('pgR_min_row='+this.value+'max_rows='+$v('apexir_NUM_ROWS')+'rows_fetched='+$v('apexir_NUM_ROWS'));
  }
 });
 $('#htmldbIrCustPagination').bind('htmldbIrReady htmldbIrAjaxEnd',function(){
  if($('#apexir_DATA_PANEL').find('table.apexir_WORKSHEET_DATA td').length>0){
   $(this).show();
  }else{
   $(this).hide();
  }
 });
});
(function($){
 $.htmldbIrBusyGrap=function(){
  if($('#apexir_WORKSHEET_REGION').length>0){
   gReport._BusyGraphic=function(pState){
    if(pState==1){
      $x_Show('apexir_LOADER');
    }else{
     if(!$('#apexir_WORKSHEET').data('htmldb')){
      $('#apexir_WORKSHEET').data('htmldb',{irReady:true});
      $.event.trigger('htmldbIrReady');
     };
     $x_Hide('apexir_LOADER');
     $.event.trigger('htmldbIrAjaxEnd');
    };
    return;
   };
   $.event.trigger('htmldbIrReady');
   $('#apexir_WORKSHEET').data('htmldb',{irReady:true});
  }
 };
 $.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});};
  };
 };
})(jQuery);
</script>

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='+$.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>
<script type="text/javascript">
addLoadEvent($.htmldbIrBusyGrap);
</script>

Make sure that interactive report Pagination Type is "Row Ranges X to Y of Z".