javascript - 分页中的“转到”问题

Question

我的分页中有“转到”的小障碍。主要问题是当我在输入中输入“数字”时，点击转到，页面正在更改，但分页中的“当前页面”未激活，并且当我转到例如 3 的页面时，我无法使用更高的页面“下一步”按钮，但我可以回到 2,1。

function getPageList(totalPages, page, maxLength) {
    if (maxLength < 5) throw 'maxLength must be at least 5';

    function range(start, end) {
        return Array.from(Array(end - start + 1), (_, i) => i + start);
    }

    var sideWidth = maxLength < 9 ? 1 : 2;
    var leftWidth = (maxLength - sideWidth*2 - 3) >> 1;
    var rightWidth = (maxLength - sideWidth*2 - 2) >> 1;
    if (totalPages <= maxLength) {
        // no breaks in list
        return range(1, totalPages);
    }
    if (page <= maxLength - sideWidth - 1 - rightWidth) {
        // no break on left of page
        return range(1, maxLength-sideWidth-1)
            .concat([0])
            .concat(range(totalPages-sideWidth+1, totalPages));
    }
    if (page >= totalPages - sideWidth - 1 - rightWidth) {
        // no break on right of page
        return range(1, sideWidth)
            .concat([0])
            .concat(range(totalPages - sideWidth - 1 - rightWidth - leftWidth, totalPages));
    }
    // Breaks on both sides
    return range(1, sideWidth)
        .concat([0])
        .concat(range(page - leftWidth, page + rightWidth))
        .concat([0])
        .concat(range(totalPages-sideWidth+1, totalPages));
}

$(function () {
    // Number of items and limits the number of items per page
    var numberOfItems = $('#jar .content').length;
    var limitPerPage = 4;
    // Total pages rounded upwards
    var totalPages = Math.ceil(numberOfItems / limitPerPage);
    // Number of buttons at the top, not counting prev/next,
    // but including the dotted buttons.
    // Must be at least 5:
    var paginationSize = 8;
    var currentPage;

    function showPage(whichPage) {
        if (whichPage < 1 || whichPage > totalPages) return false;
        currentPage = whichPage;
        $('#jar .content').hide()
            .slice((currentPage-1) * limitPerPage,
                currentPage * limitPerPage).show();
        // Replace the navigation items (not prev/next):
        $('.pagination li').slice(1, -1).remove();
        getPageList(totalPages, currentPage, paginationSize).forEach( item => {
            $('<li>').addClass('page-item')
            .addClass(item ? 'current-page' : 'disabled')
            .toggleClass('active', item === currentPage).append(
                $('<a>').addClass('page-link').attr({
                    href: 'javascript:void(0)'}).text(item || '...')
            ).insertBefore('#next-page');
    });
        // Disable prev/next when at first/last page:
        $('#previous-page').toggleClass('disabled', currentPage === 1);
        $('#previous-slick').toggleClass('slick-disabled', currentPage === 1);
        $('#next-page').toggleClass('disabled', currentPage === totalPages);
        $('#next-slick').toggleClass('slick-disabled', currentPage === totalPages);

        return true;
    }

    // Include the prev/next buttons:
    $('.pagination').append(
        $('<li>').addClass('page-item').attr({ id: 'previous-page' }).append(
            $('<button>').addClass('page-link slick-prev').attr({ id: 'previous-slick' }).text('prev')
        ),
        $('<li>').addClass('page-item').attr({ id: 'next-page' }).append(
            $('<button>').addClass('page-link slick-next').attr({ id: 'next-slick' }).text('next')
        )
    );
    // Show the page links
    $('#jar').show();
    showPage(1);

    // Use event delegation, as these items are recreated later
    $(document).on('click', '.pagination li.current-page:not(.active)', function () {
        return showPage(+$(this).text());
    });
    $('#next-page').on('click', function () {
        return showPage(currentPage+1);
    });

    $('#previous-page').on('click', function () {
        return showPage(currentPage-1);
    });

    var $btn = $('.go-to');

    $btn.on('click', function () {
        var $inputPageVal = $('input.page-number').val();

        return showPage($inputPageVal);
    })
});

这里也是 JsFiddle 来检查问题所在：http: //jsfiddle.net/yf0g1ceh/12/

标签： javascriptjqueryhtml

Answer 1

currentPage === totalPages您可以根据考虑到数据类型的条件禁用上一个/下一个按钮。如果将字符串6与数字进行比较6，则结果为false。

尝试确保使用整数调用函数。

例如：

$btn.on('click', function () {
    var $inputPageVal = $('input.page-number').val();

    return showPage(parseInt($inputPageVal, 10));
})