pagination issue Jquery

Team,
am facing an pagination related problem here.

The below is the JS functions that i have used.
$( document ).ready( function()
{
      
      // how much items per page to show
      var show_per_page = 1;
      // calculate the number of pages we are going to have
      paginate( show_per_page );
} );
function paginate( show_per_page )
{
      
      var number_of_items = $( '#totalCompletedList' ).val();
      var number_of_pages = Math.ceil( number_of_items / show_per_page );
      alert("number_of_items"+number_of_items);
      // set the value of our hidden input fields
      $( '#current_page' ).val( 1 );
      $( '#number_of_pages' ).val( number_of_pages );
      var navigation_html = '';
      var dots ='...';
      //var pagetobeDisplayed=2;
            
      if( number_of_pages > 1 )
      {
            
            var j = 1;
            while( ( number_of_pages + 1 ) > j )
            {
                  
                  if( j == 1 )
                  {
                        navigation_html += '<a id= "ContribPage ' + j + 'c' + '" title="ContribPage ' + j + '" href="javascript:go_to_page(' + j + ')" longdesc="' + j + '" class="selected" >' + j + '</a>';
                  }
                  else if(j==2 && number_of_pages>2 )
                  {
                  
                        navigation_html += '<a id= "ContribPage ' + j + 'c' + '" title="ContribPage ' + j + '" href="javascript:go_to_page(' + j + ')" longdesc="' + j + '">'+j+'</a>';
                  }
                  else if(j==3 && number_of_pages >3 )
                  {
                  
                        //navigation_html += '<a id= "ContribPage ' + j + 'c' + '" title="ContribPage ' + j + '" href="javascript:go_to_page(' + j + ')" longdesc="' + j + '">'+j+'</a>';
                        navigation_html+=dots;
                  }
                  else if(j==4)
                  {
                        navigation_html += '<a id= "ContribPage ' + j + 'c' + '" title="ContribPage ' + j + '" href="javascript:go_to_page(' + j + ')" longdesc="' + j + '">'+j+'</a>';
                  }
                  j++;
            }
            $( '#contrib_prev' ).hide();
            $( '#contrib_next' ).show();
            
      }
      else
      {
            
            $( '#contrib_prev' ).hide();
            $( '#contrib_next' ).hide();
      }
      $( '#contributionpages' ).html( navigation_html );
      var currentPage = 1;
      $( '#completeHistoryTable' ).find( 'tbody tr' ).hide();
      
      var i = 0;
      while( show_per_page > i )
      {
            var str = 'page_navigation_' + ( i + 1 ) + '_';
            $( "tr[id^='" + str + "']" ).show();
            i++;
      }
      
}
function previous()
{
      
      new_page = parseInt( $( '#current_page' ).val() ) - 1;
      go_to_page( new_page );
}

function next()
{
      new_page = parseInt( $( '#current_page' ).val() ) + 1;
      go_to_page( new_page );
}

function go_to_page( page_num )
{
      
      var show_per_page = parseInt( $( '#itemsList' ).val() );
      // get the element number where to start the slice from
      start_from = ( page_num * show_per_page ) - show_per_page;
      
      // get the element number where to end the slice
      end_on = ( page_num * show_per_page );// start_from + show_per_page;
      $( '#completeHistoryTable' ).find( 'tbody tr' ).hide();
      
      var i = start_from + 1;
      while( ( end_on + 1 ) > ( i ) )
      {
            var str = 'page_navigation_' + ( i ) + '_';
            $( "tr[id^='" + str + "']" ).show();
            i++;
      }
      
      $( "a[id^='ContribPage ']" ).attr( 'class', '' );
      $( "a[id^='" + 'ContribPage ' + page_num + "c']" ).attr( 'class', 'selected' );
      $( '#current_page' ).val( page_num );
      
      if( $( '#number_of_pages' ).val() > 1 )
      {
            if( page_num == 1 )
            {
                  $( '#contrib_prev' ).hide();
            }
            else
            {
                  $( '#contrib_prev' ).show();
            }
            if( $( '#number_of_pages' ).val() == page_num )
            {
                  $( '#contrib_next' ).hide();
            }
            else
            {
                  $( '#contrib_next' ).show();
            }
      }
      
      
}


pagination div from my code:
<div class="pt" id="paginationDiv">
                    <div class="flr ptb" id="selectPage"> <span class="prs txtb txts">Show:</span>
                   
                      <select  id="itemsList" onchange="javascript:paginate(this.options[this.selectedIndex].value)">
                        <option value="1">1</option>
                        <option value="2" selected="selected">2</option>
                        <option value="3">3</option>
                      </select>
                     
                      <span class="pls txtb txts">Lists / Page</span>
                     </div>
                    <div class="clear"></div>
                    <div class="pagination" id="contributionPrevNext">
                    <a title="Previous Page" href="javascript:previous();" class="backLink" id="contrib_prev"><span class="icon"></span>Previous</a>
                    <div class="pages" id="contributionpages">
                    </div>  
                      <a title="Next Page" href="javascript:next();" class="nextLink npr" id="contrib_next"><span class="prs">Next</span><span class="icon"></span></a>
                    </div>
                    <div class="clear"></div>
                  </div>


I need to display the pagination as below.

<PREVIOUS 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 ... 20 NEXT>

       <PREVIOUS 1 ... 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17... 20 NEXT>

pagination works very well except the dot issue. please help.
LVL 16
Easwaran ParamasivamAsked:
Who is Participating?
 
Easwaran ParamasivamConnect With a Mentor Author Commented:
i have checked these plug ins. however it would be great if you could point out the errors or help me fixing those errors.

I do find some of the plug ins from the internet other than this.

http://tutorials.ajaxmasters.com/pagination-demo/

Thanks
0
 
Scott Fell, EE MVEDeveloper & EE ModeratorCommented:
There are some small errors in your code but what about using a plug in http://flaviusmatis.github.com/simplePagination.js/#page-2
0
 
Easwaran ParamasivamAuthor Commented:
For your information , the above code works very well , except the dot logic scenario.
0
Free Tool: ZipGrep

ZipGrep is a utility that can list and search zip (.war, .ear, .jar, etc) archives for text patterns, without the need to extract the archive's contents.

One of a set of tools we're offering as a way to say thank you for being a part of the community.

 
Scott Fell, EE MVEDeveloper & EE ModeratorCommented:
I typically throw things in to jsbin or jslint.  I did not follow your code in detail.  However,  it is good practice to declare the radix in parsint https://developer.mozilla.org/en-US/docs/JavaScript/Reference/Global_Objects/parseInt

There are a lot of plug ins for this that already have tackled what you want to do.  You can either use them as is or take ideas from them.

For your code, you did not include something with the id "totalCompletedList"
totalCompletedList

When I select the drop down for 1,2,3 it works with the dots but not more then that.
0
 
Easwaran ParamasivamAuthor Commented:
Thank you for your response. I have it as part of my hidden value and getting value from back end. after i put alert, am getting the value from there.
Yeah i have given the conditional check with 1 & display per page as 1 as default.

I need to make this conditional check as generic one. so that it works for all cases.

Thank you.
0
 
Scott Fell, EE MVEDeveloper & EE ModeratorCommented:
That link for totalcompletedList was supposed to got o a jsbin.  It did work fine once I declared a field with an id for totalCompletedList an a value.  So maybe your backend code is not supplying the data.
0
 
Easwaran ParamasivamAuthor Commented:
I have put an alert to see if the value comes or not. it comes all the time..no issues with that.
0
 
Scott Fell, EE MVEDeveloper & EE ModeratorCommented:
Right but  look at the alert, it does not contain data except text because on this line

      var number_of_pages = Math.ceil( number_of_items / show_per_page );

there is no value for: number_of_items

Once I placed a value for that, I could see the dots.  

I think for the most part your code works once all the values are plugged in.
0
 
Easwaran ParamasivamAuthor Commented:
Thats right. i do see the dots. but as per the above expectation , the dots needs to be placed as you keep navigating.

<PREVIOUS 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 ... 20 NEXT>

       <PREVIOUS 1 ... 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17... 20 NEXT>

Trying some thing like this..

var number_of_items = $( '#totalCompletedList' ).val();
      var number_of_pages = Math.ceil( number_of_items / show_per_page );
      alert("number_of_items"+number_of_items);
      // set the value of our hidden input fields
      $( '#current_page' ).val( 1 );
      $( '#number_of_pages' ).val( number_of_pages );
      var navigation_html = '';

if(number_of_pages > max_pages_to_show){
                        var middle_items = 15;                        
                        var current_page = parseInt( $( '#current_page' ).val() );
                        alert("current_page"+current_page);
                        var start_range = parseInt(current_page) - Math.floor(middle_items);
                        var end_range = parseInt(current_page) + Math.floor(middle_items);
                        if(start_range < 0){
                                end_range += Math.abs(start_range);
                                start_range=0;
                        }
                        if(end_range > number_of_pages){
                                start_range -= end_range - number_of_pages;
                                end_range = number_of_pages;
                        }
                        var i = 0;
                        while(i <= number_of_pages){
                                if(start_range>1 && i == start_range){
                                        navigation_html += '...';
                                }
                                if(i == 1 || i == number_of_pages || (i >= start_range && i <= end_range)){  
                               
                                navigation_html += '<a id= "ContribPage ' + i + 'c' + '" href="javascript:go_to_page(' + i + ')" longdesc="' + i +'">'+ (i + 1) +'</a>';                                    
                                          
                                }                              
                                if(end_range < number_of_pages-1 && i == end_range){
                                        navigation_html += '...';
                                }
                                i++;
                        }
              }
              
              else{
                var i = 0;
                while(number_of_pages > i){
                        navigation_html += '<a id= "ContribPage ' + i + 'c' + '" href="javascript:go_to_page(' + i + ')" longdesc="' + i +'">'+ (i + 1) +'</a>';
                        i++;
                }
        }

please check if the code snippet needs some corrections.
0
 
Easwaran ParamasivamAuthor Commented:
Thanks to ajax master portal.
I have the used the sample example there. I was able to achieve the pagination. am closign  this request.

Thanks
easwar
0
 
Easwaran ParamasivamAuthor Commented:
My code snippet was unresolved. I used the sample in the ajax master portal and was able to rewrite my own pagination logic.
0
Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

All Courses

From novice to tech pro — start learning today.