CODEWITHSUNDEEP
jqueryhtmlpagination
nick
nick

Reputation: 1246

Adding a next button to pagination javascript

Using this js pagination I would like to get some help on how to add a next and previous button to it. Also I have been trying really hard to make it so that the OL is dynamic and has as many pages as there is content. Some help would be very much appreciated. jfiddle.

 pageSize = 3;

 showPage = function(page) {
 $(".content").hide();
 $(".content").each(function(n) {
    if (n >= pageSize * (page - 1) && n < pageSize * page)
        $(this).show();
});        
}

showPage(1);

<div class="content">1 I have some content</div>
<div class="content">2 I have some content</div>
<div class="content">3 I have some content</div>
<div class="content">4 I have some content</div>
<div class="content">5 I have some content</div>
<div class="content">6 I have some content</div>
<div class="content">7 I have some content</div>
<div class="content">8 I have some content</div>
<div class="content">9 I have some content</div>
<div class="content">10 I have some content</div>
<div class="content">11 I have some content</div>
<div class="content">12 I have some content</div>

<ol id="pagin">
        <li><a class="current" href="#">1</a></li>
        <li><a href="#">2</a></li>
        <li><a href="#">3</a></li>
        <li><a href="#">4</a></li>
</ol>

Upvotes: 0

Views: 3813

Answers (2)

sidney
sidney

Reputation: 2714

Using your code, here is my answer: http://jsfiddle.net/jfm9y/405/ Everything that you required is there. It evens continues further if you had more div, it is dynamic.

I hopes it helps you

JS:

pageSize = 3;
var i = 1;
showPage = function(page) {
    $(".content").hide();
    $(".content").each(function(n) {
        if (n >= pageSize * (page - 1) && n < pageSize * page)
            $(this).show();
    });        
}

showPage(i);

$("#previous").click(function() {
    $("#next").removeClass("current");
    $(this).addClass("current");
    if (i != 1) {
      showPage(--i);
    }
});
$("#next").click(function() {
    $("#previous").removeClass("current");
    $(this).addClass("current");
    if (i < ($('.content').length)/3) {
      showPage(++i);
    }    
});

A bit of HTML modification:

<ol id="pagin">
            <li><a id='previous' class="current" href="#">Previous</a></li>
            <li><a id='next' href="#">Next</a></li>
</ol>

Upvotes: 1

Willy
Willy

Reputation: 1075

How about something like this? http://jsfiddle.net/jfm9y/184/

$('a.prev, a.next').click(function(){
    var a = $(this),
        current = $('#pagin li a.current'),
        page = parseInt(current.text());
    if (a.hasClass('prev')) {
        page--;
        if (page < 1) page = 1;
    } else if (a.hasClass('next')) {
        page++;
        if (page > pageCount) page = pageCount;
    }
    $('.page:eq(' + (page - 1) + ')').click();
});

Upvotes: 1

Related Questions