jQuery分页下一页和上一页按钮在点击零或超过最后一页后失败

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

本文关键字:一页 最后 失败 分页 按钮 jQuery      更新时间:2023-09-26

上一页和下一页按钮没有限制,即:可以在第一页和最后一页前后移动。。。似乎无法限制这一点。

我创建了if语句,试图阻止按钮执行,但它不起作用。有什么想法吗?

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();

        });

    });

});

通过对jsFiddle的一点调试发现了问题。在这部分代码中:

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

CCD_ 1的值有时被存储为字符串。因此,添加"3"+1会在JavaScript中生成"31"

琐碎的解决方案是在加法之前将其转换为整数:

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

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


然而,我更愿意从源头上解决问题,几行下来:

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

当您首先存储linkNum时,.val()会返回一个字符串。立即将其解析为整数:

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

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

然后在执行添加之前,您不必更改它。

您在linkNum变量中遇到的问题是,当您单击某个页码时,变量会得到一个字符串值,然后当您尝试添加1时,您会收到一个新的字符串,例如"3"+1=>"31"、"4"+1=>"41"