jQuery Pagination next and previous buttons fail after hitting zero or past last page

Question

previous and Next buttons don't have limitations, ie: can move before and after first and last pages... cant seem to limit this.

I've created if statements to try and stop the button from executing but it wont work. any ideas?

jsFiddle: https://jsfiddle.net/s7ac8aq3/

$(function() {

    $(document).ready(function(){

        //amount of items on page
        var num = $('.post').length;

        //set items per page
        var itemsPerPage = 1;

        var nav = false;

        //array of all items
        var items = $(".post");

        //rounds up to the nearest whole number -- number of pages needed to display all results
        var numOfPages = Math.ceil((num / itemsPerPage));

        //container div
        var paginationContainer = $("#pagination-container");

        //initial link num
        var linkNum = 1;

        paginationContainer.prepend("<button class='pagination' id='btn-prev' value='prev'>Prev</button>");

        //creates all pagination links as input buttons (can be anything... li, a, div, whatever)
        for(i = 0; i < numOfPages; i++)
        {

            paginationContainer.append("<button class='pagination' id='btn-" + (i + 1) +"' " + "value='" + (i + 1) + "'>" + (i + 1) + "</button>");

        }

        paginationContainer.append("<button class='pagination' id='btn-next' value='next'>Next</button>");

        //does the initial filtering of the items, hides anything greater than page 1
        items.filter(":gt(" + (itemsPerPage -1) + ")").hide();

        //finds the input feilds and executes onclick
        paginationContainer.find('button').on('click', function(){

            //REQUIRED RESETS NAV BOOL SO CLICKS WILL REGISTER
            nav = false;


            //stores the value of the link in this var
            var val = $(this).val();

             //if value is next or prev
            if(val == "prev")
            {
                if(linkNum > 1)
                {
                    nav = true;
                    linkNum = linkNum - 1;
                    var currentBtn = paginationContainer.find("#btn-" + linkNum);
                    var otherButtons = paginationContainer.find('button');
                    otherButtons.attr('class', "pagination");
                    currentBtn.attr('class', "current");
                    currentBtn.focus();
                }
            }
            else if (val == "next")
            {
                if(linkNum < numOfPages)
                {
                    nav = true;
                    linkNum = linkNum + 1;
                    var currentBtn = paginationContainer.find("#btn-" + linkNum);
                    var otherButtons = paginationContainer.find('button');
                    otherButtons.attr('class', "pagination");
                    currentBtn.attr('class', "current");
                    currentBtn.focus();
                }
            }

            if(nav == false)
            {   
                //reoves the current class from all buttons before reassigning
                var otherButtons = paginationContainer.find('button');
                linkNum = $(this).val();

                otherButtons.attr('class', "pagination");

                //assigns current class to current button
                $(this).attr("class", "current");
            }

            //creates an array of items to hide based on if the set results are less than the link num
            var itemsToHide = items.filter(":lt(" + ((linkNum-1) * itemsPerPage) + ")");

            // adds any items that are greater than the set results from the link num to the hide array
            $.merge(itemsToHide, items.filter(":gt(" + ((linkNum * itemsPerPage) -1) + ")"));

            // hides the items in hide array
            itemsToHide.hide();

            //shows all items NOT in the hide array
            var itemsToShow = items.not(itemsToHide);
            itemsToShow.show();


        });



    });



});

Answer 1

A little debugging of your jsFiddle identified the problem. In this part of the code:

        } else if (val == "next") {
            if (linkNum < numOfPages) {
                nav = true;
                linkNum = linkNum + 1;

the value of linkNum is sometimes being stored as a string. As a result, adding "3"+1 produces "31" in JavaScript.

The trivial solution is to convert it to an integer before the addition:

                linkNum = parseInt(linkNum,10) + 1; // always use a radix

https://jsfiddle.net/mblase75/s7ac8aq3/3/

---

However, I would instead prefer to solve the problem at its source, a few lines down:

if (nav == false) {
            var otherButtons = paginationContainer.find('button');
            linkNum = $(this).val();

When you store linkNum in the first place, .val() returns a string. Parse it as an integer right away:

            linkNum = parseInt($(this).val(),10);

https://jsfiddle.net/mblase75/s7ac8aq3/4/

and then you don't have to change it before performing the addition.

Answer 2

Your problem in linkNum variable, when you click on certain page number, variable gets a string value, after that when you trying to add 1 you receive a new string, for example "3" + 1 => "31", "4" + 1 => "41"