CODEWITHSUNDEEP
jquery
uzhas
uzhas

Reputation: 925

How to add previous and next button?

So my problem is that when user click on next button, it does not move on pagination.

This is my fiddle http://jsfiddle.net/jfm9y/821/ so any suggestion how can I fix this? When I click next or prev it moves content but I can't get highlight numbers.

var pageSize = 3;
var currentpage = 1;
var pagecount = 0;
var page_count = document.getElementById('page_count').value;

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

showPage(1);

$("#pagin li a.numbers").click(function () {
    $("#pagin li a.numbers").removeClass("current");
    $(this).addClass("current");
    showPage(parseInt($(this).text()));
});

$("#pagin").on("click", "a", function (event) {
    if ($(this).html() == "next") {
        $("#pagin li a.numbers").removeClass("current");

        currentpage++;
        console.log(currentpage);
    }
    else if ($(this).html() == "prev") {
        currentpage--;
    }
    else {
        currentpage = $(this).html();
    }
    if (currentpage < 1) {
        currentpage = 1;
    }
    if (currentpage > page_count) {
        currentpage = page_count;
    }
    showPage(currentpage);
});

Upvotes: 0

Views: 75

Answers (1)

StoYan
StoYan

Reputation: 255

Just add IDs to every button. Like this for example:

<li><a id="btn1" class="current" href="#">1</a></li>
<li><a id="btn2" href="#">2</a></li>
<li><a id="btn3" href="#">3</a></li>
<li><a id="btn4" href="#">4</a></li>

and add this in your JS after showPage(currentpage);

$(".current").removeClass("current");
$("#btn"+currentpage).addClass("current");

Upvotes: 2

Related Questions