Search code examples
jquerypaginationrss

jQuery paging - number of pages is wrong


I'm trying to make a paging functionality in a rss parser. It's almost working. Only the last page is wrong. See fiddle here. The last page displays 11-10. Why is that? There are currently 10 items in the feed, so in this example there should be only two pages, not three - and on page number two, the "next" button should be hidden.

Is this where something is wrong?

if (numEntriesReturned+1-oRssConfig.contempOffset>0 && oRssConfig.contempOffset<100-oRssConfig.maxItems) $('#btnNext').css("display", "block");
    else $('#btnNext').css("display", "none");

Solution

  • After many hours, I re-wrote the script completely. This should work to load & paginate the RSS feed using Zazar's zRSSFeed plug-in. I commented most functions so you can see and understand whats going on, well, hopefully!

    Features:
    Easily choose 'Feeds Per Page' to display.
    Easily enter the link to the RSS Feed.
    Next & Previous Buttons appear/disappear when needed.
    Displays Feed Count automatically on each page. Example: '1 of 5'

    Check out this Fiddle to see it in action!
    Any questions?

    JQuery Script

    // Editable Values
    var feedlink = 'http://feeds.reuters.com/reuters/oddlyEnoughNews'; // Set Feed Location
    var fpp = 4; // Choose how many feeds per page to display (fpp = Feeds Per Page)
    var feedview = '#RSSview'; // Choose where to diplay the RSS Feed
    
    // Initial Variables ( Do Not Edit )
    var feeds = null; // Variable to hold total feed count
    var totalpages = null; // Variable to hold total pages
    var currentpage = null; // Variable to hold Current Page being Displayed
    var lastpagefeeds = null; // Variable to hold Amount of Feeds on the Last Page
    var firstof = null; // Variable to hold First Feed Display - Example: 3 of ?
    var lastof = null; // Variable to hold Last Feed Display - Example: ? of 10
    var feedoffset = 1; // Set Initial Feed Offset
    
    ///////////////////
    // RSS Functions //
    ///////////////////
    
    // Calulate Feed Count Display
    function displayfeedcount(){
        // Set 'First Of ???'
        firstof = feedoffset;
        // Set '??? of Last'
        if(currentpage == Math.ceil(totalpages)){ lastof = feeds; }else{ lastof = (firstof + fpp) - 1;}
        $('#offsetDispl').html( firstof + ' of ' + lastof); // Display Feed Count ' First of Last'
    }
    
    // Load Initial Feeds on Page 1
    function initialfeeds(){
        $(feedview).rssfeed( feedlink , { limit: fpp , offset: 0 }); // Load Initial Set of Feeds
        currentpage = 1; // Set Current Page to 1
        displayfeedcount(); // Trigger the Display of Feedcount - Example: '1 of 5'
    }
    
    // Calculate Total Pages
    function calculatepages(){
        totalpages = feeds / fpp; // Total Page Calculation
        console.log( 'Total Pages: ' + totalpages); // Log - For Testing Purposes Only - Delete if Desired
        initialfeeds(); // Trigger Initial Display of Feeds
    }
    
    // Determine if the NextBtn should be shown on load
    function showbuttons(){
        if ( feeds > fpp ){ $('#btnNext').show(); } // Evaluate 'Next Button' Visibility
    }
    
    // Determine Total Feed Count
    function feedcount() {
        feeds = arguments[1]; // Set Feed Count to Variable 'feeds'
        console.log( 'Total Feeds: ' + feeds ); // Log - For Testing Purposes Only - Delete if Desired
        showbuttons(); // Trigger Initial Button Display
        calculatepages(); // Trigger Total Page Calculation
    }
    
    // Function to Show Next Page
    function nextpage(){
        currentpage = currentpage + 1; // Set New Current Page
        feedoffset = feedoffset + fpp ; // Set New Feed Offset   
        console.log('Current Page is: ' + currentpage);  // Log - For Testing Purposes Only - Delete if Desired
        console.log('Feed Offset is: ' + feedoffset );  // Log - For Testing Purposes Only - Delete if Desired
        $(feedview).rssfeed( feedlink , { limit: fpp , offset: feedoffset }); // Load Next Set of Feeds
        if( currentpage >= totalpages ){ $('#btnNext').hide();} // Evaluate 'Next Button' Visibility
        if( currentpage > 1){ $('#btnPrev').fadeIn('250');} // Evaluate 'Previous Button' Visibility
        displayfeedcount(); // Display Feed Count ' ??? of ??? '   
    }
    
    // Function to Show Previous Page
    function prevpage(){
        currentpage = currentpage - 1;  // Set New Current Page
        feedoffset  = feedoffset - fpp ; // Set New Feed Offset
        console.log('Current Page is: ' + currentpage);  // Log - For Testing Purposes Only - Delete if Desired
        console.log('Feed Offset is: ' + feedoffset );  // Log - For Testing Purposes Only - Delete if Desired
        $(feedview).rssfeed( feedlink , { limit: fpp , offset: feedoffset });
        if( currentpage <= totalpages ){ $('#btnNext').fadeIn('250');} // Evaluate 'Next Button' Visibility
        if( currentpage <= 1){ $('#btnPrev').hide();} // Evaluate 'Previous Button' Visibility
        displayfeedcount(); // Display Feed Count ' ??? of ??? '
    }
    
    // Bind Previous and Next Button Clicks
    $('#btnPrev').on('click', prevpage); // Bind the PrevPage Function
    $('#btnNext').on('click', nextpage); // Bind the NextPage Function
    
    // Retrieve Total Feeds
    $('#hidden').rssfeed( feedlink , {}, feedcount);
    // Make sure this divider exists on the page body >>>  <div id="hidden" style='display:none;'></div>