Question

At the moment I’m using a pager that when you click the page numbers loads the page. At the moment the code displays the current 10 closest pages and then arrows to go first, previous, next and to the last pages.

My aim is to create jQuery to dynamically update the #pages div with the correct numbers and/or remove the arrows if the user is on the first or last page.

HTML

<div id="pages">
    <a href="1" class="first">&laquo;</a>
    <a href="1" class="previous">&lsaquo;</a>    
    <span class="current">2</span>  
    <a href="3">3</a>
    <a href="4">4</a>
    <a href="5">5</a>
    <a href="6">6</a>
    <a href="7">7</a>
    <a href="8">8</a>
    <a href="9">9</a>
    <a href="10">10</a>
    <a href="11">11</a>   
    <a href="3" class="next">&rsaquo;</a>
    <a href="128" class="last">&raquo;</a>
</div>

Example jQuery for highest number click

//change page numbers if highest number clicked
$(document).on("click", "#pages a", function(){
    if($(this).index() == 11){
        $("#pages :nth-child(3)").remove();
        $("#pages a:nth-child(11)").after('<a href="'+ (parseInt($(this).text()) + 1) + '" rel="nofollow" class="current">'+ (parseInt($(this).text()) + 1) + '</a>');
    }
});

Here’s a jFiddle with a working example of what I currently have:

http://jsfiddle.net/84NaC/5/

You can see in the jFiddle example that if you click the lower arrow or lowest number then the lowest number is removed and a new high number is inserted. The comments explain how this bit works.

The Problem

The current approach is kind of buggy and I’m not very happy with how it functions, is there a more reliable way to do what I’m looking for?

Answer 1

I played with your JSFiddle and modified the HTML to

<div id="content">Default</div>
<div id="pages">
    <a href="1" class="goto-first-page">&laquo;</a>
    <a href="#" class="goto-previous-page">&lsaquo;</a>
    <a href="1" class="goto-page">1</a>
    <a href="2" class="goto-page current-page">2</a>
    <a href="3" class="goto-page">3</a>
    <a href="4" class="goto-page">4</a>
    <a href="5" class="goto-page">5</a>
    <a href="6" class="goto-page">6</a>
    <a href="7" class="goto-page">7</a>
    <a href="8" class="goto-page">8</a>
    <a href="9" class="goto-page">9</a>
    <a href="10" class="goto-page">10</a>
    <a href="11" class="goto-page">11</a>
    <a href="#" class="goto-next-page">&rsaquo;</a>
    <a href="128" class="goto-last-page">&raquo;</a>
</div>

defined some functions

function update_page_content(n)
{
    $('#content').html('Page ' + n + ' Content');
}

function update_page_range(lower_bound)
{
    var range = range_last_page - range_first_page;
    range_first_page = lower_bound;
    range_last_page = lower_bound + range;
    $('.goto-page').each(function(index) {
        $(this).attr('href', lower_bound + index).text(lower_bound + index);
    });

}

function goto_page(n) {
    // adjust current page
    var current = $('.goto-page[href="' + n + '"]');
    if (current.length == 0) {
        if (n <  range_first_page) {
            if (n >= first_page) {
                var lower_bound = Math.max(first_page, n - 5);
                update_page_range(lower_bound);
                current = $('.goto-page[href="' + n + '"]');
            }
        } else if (n > range_last_page) {
            if (n <= last_page) {
                var upper_bound = Math.min(last_page, n + 5);
                update_page_range(upper_bound - 10);
                current = $('.goto-page[href="' + n + '"]');
            }
        }
    }

    if (current.length > 0) {
        // set content
        update_page_content(n);

        $('.goto-page').removeClass('current-page');
        current.addClass('current-page');
    }
}

and then set the click()s individually

$('.goto-previous-page').click(function () {
    var n = $('.current-page').attr('href');
    goto_page(+n - 1);
    return false;
});
$('.goto-next-page').click(function () {
    var n = $('.current-page').attr('href');
    goto_page(+n + 1);
    return false;
});
$('.goto-first-page, .goto-last-page, .goto-page').click(function () {
    var n = $(this).attr('href');
    goto_page(+n);
    return false;
});

Complete JSFiddle