Images for navigation of pages not getting disabled on moving next / previous

[GoogleCodeExporter]

What steps will reproduce the problem?
1. I have a flexigrid with 20 rows in which the rp count is 15. The flexigrid 
displays Page 1 of 2 of 1 to 15 items.
2. On navigation, it displays Page 2 of 2 of 16 - 20 items.
3. But, even after clicking the last page ( 2 Of 2), the next image is not 
getting disabled. How to handle this?

What is the expected output? What do you see instead?
Either in the last page or in the first page, the next / previous images should 
get disabled.

What version of the product are you using? On what operating system?
Windows XP. Firefox 3.6 version.

Please provide any additional information below.

Original issue reported on code.google.com by krishnap...@gmail.com on 12 May 2011 at 6:44

[GoogleCodeExporter]

To add to the above, the buttons aren't clickable, but not getting hidden to 
the user. 

Original comment by krishnap...@gmail.com on 16 May 2011 at 3:03

[GoogleCodeExporter]

[deleted comment]

[GoogleCodeExporter]

I have handled the above scenario in my jsp file & not in the flexigrid.js 
file. Altogether, my final objective is to write in the flexigrid.js so that it 
would be used across multiple jsp files and the code needn't be rewritten in 
all the jsp's.

Temporary Solution - GetPageNumber
$.fn.flexGetPageNumber = function ()
    {
       var result = 1;
           this.each( function() {
              if (this.grid){
                     result = this.grid.getCurrentPageNum();
                        }
                });
                 return result;
     }; 
2. Get total records
--------------------
     $.fn.flexGetTotalRecords = function ()
     {
        var result = 1;
            this.each( function() {
               if (this.grid){
                      result = this.grid.getTotalRecords();
                         }
                 });
                  return result;
      };

3.  GetRecordsPerpage
----------------------
$.fn.flexGetRcrdsPerPage = function ()
      {
         var result;
             this.each( function() {
                if (this.grid){
                       result = this.grid.getNoofRecordsPerPage();
                          }
                  });
                   return result;
       };

getCurrentPageNum will be called from function 1 that returns p.page

getCurrentPageNum: function(){
                return p.page;
            },

getTotalRecords will be called from function 2 that returns p.total

            getTotalRecords: function(){
                return p.total;
            },

getNoofRecordsPerPage will be called from function 3 that returns p.rp

            getNoofRecordsPerPage:function(){
                return p.rp;
            },
Create 4 disabled images and put it in the images folder (FirstDisabled / 
LastDisabled / PrevDisabled / Nextdisabled). also, define the same in the 
flexigrid.css. 
In the respective jsp, create the pagination logic & accordingly add / remove 
the css on top of the existing ones. 

A sample output image is attached for reference. Also, if you have two grids on 
the same page, have "FORMS" defined for both of them, and use the form object 
to identify if the css exists and accordingly add / remove the same.

Let me know, if more clarifications are required on the same.

Original comment by krishnap...@gmail.com on 5 Jul 2011 at 1:19

Attachments:

• pagination_disabledimages.JPG

[GoogleCodeExporter]

To obtain the total records, you have given a solution. But I want to know 
after manipulating on the grid can I get the total records in the same event. 
Using your solution I am getting the total no of records before manipulating 
the grid.Please help !!!

Original comment by sintavin...@gmail.com on 13 Mar 2012 at 6:28

[GoogleCodeExporter]

Could you elaborate your requirement in a more clear way?I am unable to get of 
what you are trying to ask me.

Original comment by krishnap...@gmail.com on 16 Mar 2012 at 5:59

[GoogleCodeExporter]

I had to implement a same kind of thing in one of the projects. For this, I 
modified the flexigrid.js file. The modifications are as given below:

1. line no: 967 after the comment "// add pager" in "if (p.usepager)" block.

var html = ' <div class="pGroup"> <div class="pFirst pButton" 
id="firstPageButton"><span></span></div><div class="pPrev pButton" 
id="prevPageButton"><span></span></div> </div> <div class="btnseparator"></div> 
<div class="pGroup"><span class="pcontrol">' + p.pagetext + ' <input 
type="text" size="4" value="1" /> ' + p.outof + ' <span> 1 </span></span></div> 
<div class="btnseparator"></div> <div class="pGroup"> <div class="pNext 
pButton" id="nextPageButton"><span></span></div><div class="pLast pButton" 
id="lastPageButton"><span></span></div> </div> <div class="btnseparator"></div> 
<div class="pGroup"> <div class="pReload pButton"><span></span></div> </div> 
<div class="btnseparator"></div> <div class="pGroup"><span 
class="pPageStat"></span></div>';

that is, I added ids to all the four divs that contain the buttons that need to 
be disabled.

2. After making this change I added the following lines of code in "buildpager" 
function at the last.

/*Page aware pagination*/
if(p.page==1){ //If it is the first page
    $('#firstPageButton').addClass('pFirstDisabled').removeClass('pFirst');
    $('#prevPageButton').addClass('pPrevDisabled').removeClass('pPrev');
    if(p.pages==1){ //total number of pages is 1
        $('#nextPageButton').addClass('pNextDisabled').removeClass('pNext');
        $('#lastPageButton').addClass('pLastDisabled').removeClass('pLast');
    }else if(p.total > p.rp){ //total number of pages is more than 1
        $('#nextPageButton').addClass('pNext').removeClass('pNextDisabled');
        $('#lastPageButton').addClass('pLast').removeClass('pLastDisabled');
    }
}else{
    $('#firstPageButton').addClass('pFirst').removeClass('pFirstDisabled');
    $('#prevPageButton').addClass('pPrev').removeClass('pPrevDisabled');
    if(p.page == p.pages){ // If it is the last page
        $('#nextPageButton').addClass('pNextDisabled').removeClass('pNext');
        $('#lastPageButton').addClass('pLastDisabled').removeClass('pLast');
    }else{// If it is not the last page
        $('#nextPageButton').addClass('pNext').removeClass('pNextDisabled');
        $('#lastPageButton').addClass('pLast').removeClass('pLastDisabled');
    }

}
/*End of page aware pagination*/

3. Finally, I added the disabled button images in the image folder and added 
the following classes in flexigrid.css file.

.flexigrid .pFirstDisabled {
    background: url("images/first_disabled.png") no-repeat scroll center center transparent;
}

.flexigrid .pPrevDisabled {
    background: url("images/prev_disabled.png") no-repeat scroll center center transparent;
}

.flexigrid .pNextDisabled {
    background: url("images/next_disabled.png") no-repeat scroll center center transparent;
}
.flexigrid .pLastDisabled {
    background: url("images/last_disabled.png") no-repeat scroll center center transparent;
}

It works fine for me. However, I am very new to jQuery so if it could be made 
better in any way or if there is any bug, please let me know.

Original comment by shekhar3...@gmail.com on 24 Jun 2013 at 12:09

Attachments:

• flexigrid.js
• flexigrid.css
• first_disabled.png
• last_disabled.png
• next_disabled.png
• prev_disabled.png