Learn how to a build a cloud-first strategyRegister Now

x
  • Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 438
  • Last Modified:

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.
0
Easwaran Paramasivam
Asked:
Easwaran Paramasivam
  • 7
  • 4
1 Solution
 
Scott Fell, EE MVEDeveloperCommented:
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:
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
 
Easwaran ParamasivamAuthor Commented:
For your information , the above code works very well , except the dot logic scenario.
0
Concerto's Cloud Advisory Services

Want to avoid the missteps to gaining all the benefits of the cloud? Learn more about the different assessment options from our Cloud Advisory team.

 
Scott Fell, EE MVEDeveloperCommented:
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 MVEDeveloperCommented:
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 MVEDeveloperCommented:
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

Featured Post

Free Tool: IP Lookup

Get more info about an IP address or domain name, such as organization, abuse contacts and geolocation.

One of a set of tools we are providing to everyone as a way of saying thank you for being a part of the community.

  • 7
  • 4
Tackle projects and never again get stuck behind a technical roadblock.
Join Now