CODEWITHSUNDEEP
jquerypaginationhtml-listselement
user3278890
user3278890

Reputation: 89

jquery pagination through multiple ul lists

I can't get this script to work well. Can someone help me? First, I would like to make it that I can use it for multiple <div> and <ul> elements. One other thing, I would like to make it so that if I have more than 5 <li> elements it appends a "next" button and then on page 2, it appends "prev" and "next" buttons. Also, if on the last page "next" button shouldn't be seen. Here is my current code:

 $('div').each(function(){
    $(this).append('<a class="prev">prev</a> | <a class="next">next</a>');
    $(this).find('ul li:gt(4)').hide();

    $(this).find('.next').click(function() {
        var last = $('ul').children('li:visible:last');
        last.nextAll(':lt(5)').show();
        last.next().prevAll().hide();
    });

     $(this).find('.prev').click(function() {
        var first = $('ul').children('li:visible:first');
        first.prevAll(':lt(5)').show();
        first.prev().nextAll().hide()
    });

});

Working example http://jsfiddle.net/e6sP7/3/

Upvotes: 0

Views: 4616

Answers (2)

j08691
j08691

Reputation: 207901

Just cache your reference to e.g. var foo = $(this); so it points to the proper group and you're fine. The update your first and last reference to use foo with var last = $('ul',foo).children('li:visible:last');:

jsFiddle example

$('div').each(function () {
    var foo = $(this);
    $(this).append('<a class="prev">prev</a> | <a class="next">next</a>');
    $(this).find('ul li:gt(4)').hide();
    $(this).find('.next').click(function () {
        var last = $('ul',foo).children('li:visible:last');
        last.nextAll(':lt(5)').show();
        last.next().prevAll().hide();
    });
    $(this).find('.prev').click(function () {
        var first = $('ul',foo).children('li:visible:first');
        first.prevAll(':lt(5)').show();
        first.prev().nextAll().hide()
    });
});

Upvotes: 1

pmandell
pmandell

Reputation: 4328

You can do something like this (Fiddle):

function check_navigation_display(el) {
    //accepts a jQuery object of the containing div as a parameter
    if ($(el).find('ul').children('li').first().is(':visible')) {
        $(el).children('.prev').hide();
    } else {
        $(el).children('.prev').show();
    }

    if ($(el).find('ul').children('li').last().is(':visible')) {
        $(el).children('.next').hide();
    } else {
        $(el).children('.next').show();
    }    
}

$('div').each(function () {
    $(this).append('<a class="prev">prev</a> | <a class="next">next</a>');
    $(this).find('ul li:gt(4)').hide();

    check_navigation_display($(this));

    $(this).find('.next').click(function () {
        var last = $(this).siblings('ul').children('li:visible:last');
        last.nextAll(':lt(5)').show();
        last.next().prevAll().hide();
        check_navigation_display($(this).closest('div'));
    });

    $(this).find('.prev').click(function () {
        var first = $(this).siblings('ul').children('li:visible:first');
        first.prevAll(':lt(5)').show();
        first.prev().nextAll().hide()
        check_navigation_display($(this).closest('div'));
    });
});

Upvotes: 2

Related Questions