Solved

pagination issue Jquery

Posted on 2013-02-06
11
425 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
  • 7
  • 4
11 Comments
 
LVL 52

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
DevOps Toolchain Recommendations

Read this Gartner Research Note and discover how your IT organization can automate and optimize DevOps processes using a toolchain architecture.

 
LVL 52

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 52

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 52

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

DevOps Toolchain Recommendations

Read this Gartner Research Note and discover how your IT organization can automate and optimize DevOps processes using a toolchain architecture.

Question has a verified solution.

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

Introduction A frequently asked question goes something like this:  "I am running a long process in the background and I want to alert my client when the process finishes.  How can I send a message to the browser?"  Unfortunately, the short answer …
Introduction If you're like most people, you have occasionally made a typographical error when you're entering information into an online form.  And to your consternation, the browser remembers the error, and offers to autocomplete your future entr…
Learn how to match and substitute tagged data using PHP regular expressions. Demonstrated on Windows 7, but also applies to other operating systems. Demonstrated technique applies to PHP (all versions) and Firefox, but very similar techniques will w…
Video by: Mark
This lesson goes over how to construct ordered and unordered lists and how to create hyperlinks.

773 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