Solved

pagination issue Jquery

Posted on 2013-02-06
11
420 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
 
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
Free Trending Threat Insights Every Day

Enhance your security with threat intelligence from the web. Get trending threat insights on hackers, exploits, and suspicious IP addresses delivered to your inbox with our free Cyber Daily.

 
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

IT, Stop Being Called Into Every Meeting

Highfive is so simple that setting up every meeting room takes just minutes and every employee will be able to start or join a call from any room with ease. Never be called into a meeting just to get it started again. This is how video conferencing should work!

Join & Write a Comment

Active Directory replication delay is the cause to many problems.  Here is a super easy script to force Active Directory replication to all sites with by using an elevated PowerShell command prompt, and a tool to verify your changes.
Boost your ability to deliver ambitious and competitive web apps by choosing the right JavaScript framework to best suit your project’s needs.
Learn the basics of strings in Python: declaration, operations, indices, and slicing. Strings are declared with quotations; for example: s = "string": Strings are immutable.: Strings may be concatenated or multiplied using the addition and multiplic…
In this fourth video of the Xpdf series, we discuss and demonstrate the PDFinfo utility, which retrieves the contents of a PDF's Info Dictionary, as well as some other information, including the page count. We show how to isolate the page count in a…

746 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

Need Help in Real-Time?

Connect with top rated Experts

13 Experts available now in Live!

Get 1:1 Help Now