?
Solved

pagination issue Jquery

Posted on 2013-02-06
11
Medium Priority
?
437 Views
Last Modified: 2013-02-16
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
Comment
Question by:Easwaran Paramasivam
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
  • 7
  • 4
11 Comments
 
LVL 54

Expert Comment

by:Scott Fell, EE MVE
ID: 38862749
There are some small errors in your code but what about using a plug in http://flaviusmatis.github.com/simplePagination.js/#page-2
0
 
LVL 16

Accepted Solution

by:
Easwaran Paramasivam earned 0 total points
ID: 38863749
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
 
LVL 16

Author Comment

by:Easwaran Paramasivam
ID: 38863879
For your information , the above code works very well , except the dot logic scenario.
0
Industry Leaders: We Want Your Opinion!

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

 
LVL 54

Expert Comment

by:Scott Fell, EE MVE
ID: 38864154
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
 
LVL 16

Author Comment

by:Easwaran Paramasivam
ID: 38864255
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
 
LVL 54

Expert Comment

by:Scott Fell, EE MVE
ID: 38864313
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
 
LVL 16

Author Comment

by:Easwaran Paramasivam
ID: 38864676
I have put an alert to see if the value comes or not. it comes all the time..no issues with that.
0
 
LVL 54

Expert Comment

by:Scott Fell, EE MVE
ID: 38864689
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
 
LVL 16

Author Comment

by:Easwaran Paramasivam
ID: 38864849
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
 
LVL 16

Author Comment

by:Easwaran Paramasivam
ID: 38875937
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
 
LVL 16

Author Closing Comment

by:Easwaran Paramasivam
ID: 38896138
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

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.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

This article is meant to give a basic understanding of how to use R Sweave as a way to merge LaTeX and R code seamlessly into one presentable document.
This article discusses how to create an extensible mechanism for linked drop downs.
Learn the basics of if, else, and elif statements in Python 2.7. Use "if" statements to test a specified condition.: The structure of an if statement is as follows: (CODE) Use "else" statements to allow the execution of an alternative, if the …
This tutorial will teach you the core code needed to finalize the addition of a watermark to your image. The viewer will use a small PHP class to learn and create a watermark.
Suggested Courses

650 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question